Webpack css没有从sass文件中提取

时间:2018-02-08 06:38:44

标签: webpack sass-loader

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

module.exports = {
    entry: ['./src/client.js', './sass/main.scss'],
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'public'),
        publicPath: '/public'
    },
    watch: true,
    module: {
        loaders: [
            {
                enforce: 'pre',
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'eslint-loader',
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015', 'stage-1']
                }
            }, {
                test: /\.scss$/,
                exclude: /node_modules/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'sass-loader'],
                })
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin('public/styles.css', {
            allChunks: true
        })
    ],
    devServer: {
        inline: true,
        hot: true,
        // https: true,
        // open: true,
        compress: true,
        port: 9003,
        contentBase: path.resolve(__dirname, 'public') // the webpack-dev-server serves the files in the directory provided with contentBase
    },
    stats: { colors: true },
    devtool: 'cheap-module-eval-source-map'
};
  

我正在研究项目结构

  • 公共
  • SASS
    • main.scss
  • SRC
  • webpack.config.js
  

使用上面的配置,我无法在sass编译后获取css文件。请帮助我在webpack配置的帮助下提取css文件。 webpack - 3.10和extract-text-webpack-plugin - 3.0.2

0 个答案:

没有答案