使用webpack处理scss

Tarun Dugar 发表于 Dev

塔伦·杜加（Tarun Dugar）

到现在为止，我使用gulp到

scss在源路径中查找的所有文件，
将这些文件通过gulp-sass管道传递，
最后，设置生成单个已编译css文件的目标位置。

我在HTML中使用link标记使用了最终的已编译的CSS文件。

我在webpack中复制此文件一直没有成功。我提到了该加载程序，但找不到在特定位置生成最终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
};

康路

使用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
        })
    ]
}