javascript - Webpack 不转换 SCSS (ExtractTextPlugin)

Question

我无法让 webpack (2.2.1) 将我的 .scss (main.scss) 文件编译为 css 文件。所有正确的源文件都在那里，但是没有创建 css 输出。

我看过大量不同的指南，他们似乎都可以使用与我类似的设置进行操作。

要记住的是，我正在使用 webpack --debug --display-error-details --watch 运行 webpack 并且没有错误(只是没有 css 输出)。

我的 webpack 配置如下所示:

const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: [
        './src/app.js'
    ],
    output: {
        path: 'dist/static/scripts',
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: { presets: [ 'es2015', 'react' ] }
            },
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract('css!sass')
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin({
            filename: 'dist/static/styles/[name].css',
            allChunks: true
        })
    ],
    devServer: {
        contentBase: './dist',
        hot: true
    },
};

目录结构如下:

dist/
    static/
        scripts/
        styles/
node_modules/
src/
    actions/
    components/
    constants/
    containers/
    lib/
    reducers/
    scss/
        main.scss
    store/
    app.js
package.json
webpack.config.js

webpack watching 的输出是这样的

Hash: 46d75c2b162f5e746664
Version: webpack 2.2.1
Time: 1675ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  831 kB       0  [emitted]  [big]  main
  [12] ./~/react/react.js 56 bytes {0} [built]
  [20] ./~/react/lib/React.js 2.69 kB {0} [built]
  [27] ./~/redux/es/index.js 1.08 kB {0} [built]
  [34] ./~/react-redux/es/index.js 194 bytes {0} [built]
  [96] ./src/app.js 780 bytes {0} [built]
 [104] ./src/containers/App.js 980 bytes {0} [built]
 [105] ./src/containers/ChoiceContainer.js 1.18 kB {0} [built]
 [106] ./src/containers/ResultContainer.js 623 bytes {0} [built]
 [107] ./src/containers/TimeContainer.js 1.15 kB {0} [built]
 [109] ./src/reducers/Reducers.js 583 bytes {0} [built]
 [111] ./src/store/SleepStore.js 378 bytes {0} [built]
 [136] ./~/react-dom/index.js 59 bytes {0} [built]
 [150] ./~/react-dom/lib/ReactDOM.js 5.14 kB {0} [built]
 [209] ./~/react-redux/es/connect/connect.js 5.34 kB {0} [built]
 [235] multi ./src/app.js 28 bytes {0} [built]
    + 221 hidden modules
✨  Done in 2.26s.

因此，由于某些奇怪的原因，尽管在 webpack 配置中进行了正确的模块加载器测试，但 scss 文件甚至没有被考虑或监视。 ExtractTextPlugin 似乎已正确配置，对其设置的更改将引发错误。

有人可以帮助理解为什么这不起作用吗？

Answer 1

您必须在 app.js 中要求/导入您的 scss 模块。