スタイルはwebpackで読み込まれません

Question

webpack css/scss loaderで動作するCSSを取得できません。これは私の設定の一部です：

module: { 
    rules: [ 
     { 
      test: /\.css$/, 
      use: [ 
       {loader: 'style-loader'}, 
       {loader: 'css-loader'}, 
      ], 
     }, 
     { 
      test: /\.scss$/, 
      use: [ 
       {loader: 'style-loader'}, 
       {loader: 'css-loader'}, 
       { 
        loader: 'sass-loader', 
        options: { 
         sourceMap: true, 
         includePaths: ['./src'], 
        }}, 
      ], 
     }, 
     ... 

私の知る限りでは、これは./src場所内部の任意のサブフォルダからすべての.scssファイルをロードします。だから私は、src/components/foo/styles.scssで次のファイルがあります。

body { 
    background-color: green; 
} 

をそして、それは動作しません。ここで何が間違っていますか？それ以上の詳細は必要ですか？

Answer 1

.scss/.cssファイルに読み込まれるrequire()文のどこかにindex.jsファイルが必要です。 Webpackは、あなたのアプリケーションにjavascriptの依存関係をすべてロードして、そのプロセスをブートストラップする必要があります。

また、.scssをCommonJSに変換するには、ExtractTextPluginを使用する必要があると思います（残念なことに、ここで詳しく説明できませんでした）。参考のため

は、ここで私のindex.js（app.scssと同じディレクトリに）ある：

require('./app.scss') 

と部分webpack.config.js（私はエントリのものと出力のconfigsを左）：

var ExtractTextPlugin = require("extract-text-webpack-plugin") 
... 
var config = { 
    module: { 
     rules: [ 
     // sass 
     {test: /\.scss$/, 
      use: ExtractTextPlugin.extract({ 
       fallback: "style-loader", 
       use: [{ 
        loader: "css-loader" // translates CSS into CommonJS 
       }, { 
        loader: "sass-loader" 
       }] 
      }) 
     }, 
     // for any images in your scss 
     {test: /\.(png|woff|woff2|eot|ttf|svg)$/, 
      loader: 'url-loader?limit=100000' 
     } 
     ] 
    }, 

    entry: [...], 

    plugins: [ 
     new ExtractTextPlugin("../styles/css/[name].css") 
    ] 
} 

module.exports = config