Webpack不转换SCSS（ExtractTextPlugin）

我无法让webpack（2.2.1）将我的.scss（main.scss）文件编译为css文件。所有正确的源文件都在那里，但是没有创建css输出。Webpack不转换SCSS（ExtractTextPlugin）

我看了一吨不同的指南，他们都似乎得到它与我的设置类似的工作。

需要记住的是，我正在运行带有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的看着输出这

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.

所以对于一些奇怪的原因，即使正确的模块加载器te，scss文件甚至没有被考虑或观察st在webpack配置中。 ExtractTextPlugin似乎已正确配置，并且对其设置进行更改会引发错误。

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

来源

2017-02-26 Deepak

@ caisah这很搞笑，就是这样。谢谢 – Deepak

您必须require/import您的scss模块app.js。

来源

2017-02-27 12:07:29 caisah

Webpack不转换SCSS（ExtractTextPlugin）

回答

相关问题