WebpackエイリアスでエイリアスがコンパイルされていないSASSローダー

Question

このようなスタイルをロードするコンポーネントがあります。 cssディレクトリは別の場所です。ここではWebpackエイリアスとして使用されています。ここで

import 'css/components/PromptText'; 
// ... 
class PromptText extends React.Component { 
    // ... 
} 

は私webpack.config.jsonです：

var path = require('path'); 

module.exports = { 
    entry: './src/index.jsx', 
    output: { 
    path: 'dist', 
    filename: 'app.bundle.js', 
    }, 
    module: { 
    loaders: [{ 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loader: 'babel', 
    }, { 
     test: /\.json/, 
     exclude: /node_modules/, 
     loader: 'json', 
    }, { 
     test: /\.scss/, 
     exclude: /node_modules/, 
     loaders: ['style', 'css', 'sass'], 
    }], 
    }, 
    resolve: { 
    alias: { 
     css: 'css', // <-- Alias here 
    }, 
    root: path.resolve(__dirname), 
    extensions: ['', '.js', '.jsx', '.scss'], 
    }, 
}; 

---

さて、私はモカのために、このようなテストがあります。

import PromptText from '../../src/components/PromptText'; 

describe('PromptText',() => { 
    it('should display words'); 
}); 

をモカコンポーネントをインポートすると、それはまた、しようとしますCSSコンポーネントを読み込みます。

1. cssディレクトリがエイリアスされています。この2つの問題があります。モカはエイリアスがどこを指しているか知る必要があります。この問題を解決するために、私は次のよう.babelrcと、babel-plugin-webpack-aliasパッケージをインストールしている：それは無視する必要がありますので

   { 
       "presets": ["es2017", "react", "stage-0"], 
       "env": { 
       "test": { 
        "plugins": [ 
        ["webpack-alias", {"config": "webpack.config.js"}] 
        ] 
       } 
       } 
   } 
   

2. CSSは、モカでインポートすることはできません。 ignore-stylesパッケージを使用し、Mochaをmocha --compilers js:babel-core/register --require ignore-stylesとして呼び出します。これら二つのことをしたにも関わらず

テストを実行しようとしたとき、私は次のエラーを取得する：

(cd data && make) 
make[1]: Nothing to be done for `all'. 
NODE_ENV=test ./node_modules/.bin/mocha --compilers js:babel-core/register --require ignore-styles \ 
     $(find test -type f -name 'test*.js') 
module.js:341 
    throw err; 
    ^

Error: Cannot find module 'css' 
    at Function.Module._resolveFilename (module.js:339:15) 
    at Function.Module._load (module.js:290:25) 
    at Module.require (module.js:367:17) 
    at require (internal/module.js:20:19) 
    at Object.<anonymous> (/Users/waleed/Workspace/js/steno/src/components/PromptText.jsx:2:1) 
    at Module._compile (module.js:413:34) 
    at loader (/Users/waleed/Workspace/js/steno/node_modules/babel-register/lib/node.js:146:5) 
    at Object.require.extensions.(anonymous function) [as .jsx] (/Users/waleed/Workspace/js/steno/node_modules/babel-register/lib/node.js:156:7) 
    at Module.load (module.js:357:32) 
    at Function.Module._load (module.js:314:12) 
    at Module.require (module.js:367:17) 
    at require (internal/module.js:20:19) 
    at Object.<anonymous> (/Users/waleed/Workspace/js/steno/test/components/testPromptText.js:2:1) 
    at Module._compile (module.js:413:34) 
    at loader (/Users/waleed/Workspace/js/steno/node_modules/babel-register/lib/node.js:146:5) 
    at Object.require.extensions.(anonymous function) [as .js] (/Users/waleed/Workspace/js/steno/node_modules/babel-register/lib/node.js:156:7) 
    at Module.load (module.js:357:32) 
    at Function.Module._load (module.js:314:12) 
    at Module.require (module.js:367:17) 
    at require (internal/module.js:20:19) 
    at /Users/waleed/Workspace/js/steno/node_modules/mocha/lib/mocha.js:220:27 
    at Array.forEach (native) 
    at Mocha.loadFiles (/Users/waleed/Workspace/js/steno/node_modules/mocha/lib/mocha.js:217:14) 
    at Mocha.run (/Users/waleed/Workspace/js/steno/node_modules/mocha/lib/mocha.js:485:10) 
    at Object.<anonymous> (/Users/waleed/Workspace/js/steno/node_modules/mocha/bin/_mocha:403:18) 
    at Module._compile (module.js:413:34) 
    at Object.Module._extensions..js (module.js:422:10) 
    at Module.load (module.js:357:32) 
    at Function.Module._load (module.js:314:12) 
    at Function.Module.runMain (module.js:447:10) 
    at startup (node.js:148:18) 
    at node.js:405:3 
make: *** [test] Error 1 

何らかの理由で、cssエイリアスが解決されていません。 しかし、このエラーは予期せず、ときどきで発生します。このエラーを一貫して再現するには、環境にBABEL_DISABLE_CACHE=1を設定する必要があります。

CSSファイルを正しくインポートして無視するにはどうすればよいですか？

Answer 1

この問題を解決するために、私はbabel-plugin-webpack-aliasesパッケージにbabel-plugin-webpack-aliasから切り替え、およびそれを使用するために私の.babelrcを更新：

{ 
    "presets": ["es2017", "react", "stage-0"], 
    "env": { 
    "test": { 
     "plugins": [ 
     ["webpack-aliases", {"config": "webpack.config.js"}] 
     ] 
    } 
    } 
} 

私もいつもの環境でBABEL_DISABLE_CACHE=1セットでmochaを実行します。 （私はこれがbabel-plugin-webpack-aliasのダメージを元に戻していると思います;そのパッケージが一度も使われなかった場合は、必ず実行する必要はありません）