Webpack没有转换SCSS(ExtractTextPlugin)

时间:2017-02-26 13:20:05

标签: javascript css sass webpack

我无法使用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观看的输出就是这个

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似乎已正确配置,对其设置的更改将引发错误。

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

1 个答案:

答案 0 :(得分:2)

您必须require/import app.js中的if ($_GET['logout'] == "yes") { session_unset(); unset($_SESSION); session_destroy(); echo "<meta http-equiv='refresh' content='0;url=index.php'>"; $_SESSION = array(); $_SESSION = []; } scss模块。