用webpack处理scss

时间:2016-08-08 09:27:49

标签: css sass webpack

到目前为止,我正在使用gulp

  1. 查找源路径中的所有scss个文件
  2. 通过gulp-sass渠道
  3. 传递这些文件
  4. 最后,设置生成单个编译的css文件的目标。
  5. 我使用link标记在我的html中使用了最终编译的css文件。

    我在webpack中复制这个是不成功的。我引用了这个loader,但我找不到在特定位置生成最终css文件的任何选项。这是我当前的webpack配置:

    var path = require('path');
    var webpack = require('webpack');
    
    module.exports = {
        entry: './src/liteword.js',
        output: {
            path: path.resolve(__dirname, 'build'),
            filename: 'liteword.bundle.js'
        },
        module: {
            loaders: [
                {
                    test: /\.js$/,
                    loader: 'babel-loader',
                    query: {
                        presets: ['es2015']
                    }
                },
                {
                    test: /\.scss$/,
                    loaders: ['style', 'css?sourceMap', 'sass?sourceMap']
                }
            ]
        },
        stats: {
            colors: true
        },
        devtool: 'source-map',
        watch: true
    };
    

1 个答案:

答案 0 :(得分:0)

使用extract-text-webpack-plugin可以解决您的问题。它的作用是将生成的内容(在本例中为css)移动到一个单独的文件中(而不是在bundle.js文件中将它们捆绑在一起)。

通过npm安装:

npm install --save-dev extract-text-webpack-plugin

更新您的webpack配置以包含此内容:

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

然后用自定义的加载器替换你的sass加载器,并包含插件:

module.exports = {
    // ...
    module: {
        loaders: [
            // ...
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract('css!sass')
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin('public/style.css', {
            allChunks: true
        })
    ]
}