Webpack - 如何将scss编译成单独的css文件？

Question

我想使用一个条目 - materialize.scss(它导入许多其他scss文件)并将其编译成一个单独的输出materialize.min.css文件.

我如何使用Webpack做到这一点？

我试过一百万个不同的设置与extract-text-webpack-plugin一起css,style,sass装载机,node-sass,resolve-url-loader但我会得到不同的错误,并固定一个只是导致了另一个所以...我迷路了!

Answer 1

先决条件

• CSS加载器
• 节点 sass
• sass 加载器
• 样式加载器
• 提取文本 webpack 插件

$ npm install css-loader node-sass sass-loader style-loader extract-text-webpack-plugin --save-dev

webpack.config.js

这是我的演示webpack.config.js，根据您的项目结构更改路径：

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

const srcPath = path.join(__dirname, 'src');
const dstPath = path.join(__dirname, 'dst');

const sassLoaders = [
    'css-loader?minimize',
    'sass-loader?indentedSyntax=sass&includePaths[]=' + srcPath
];

module.exports = {
    entry: {
        client: './src/js/client'
    },
    module: {
        loaders: [
            /*README:https://github.com/babel/babel-loader*/
            {
                test: /\.(js|jsx)$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel',
                query: {
                    presets: ['react', 'es2015'],
                    cacheDirectory: true
                },
                plugins: ['transform-runtime']
            },
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract('style-loader', sassLoaders.join('!'))
            },
            {
                test: /\.(png|jpg|bmp)$/,
                loader: 'url-loader?limit=8192'
            }
        ]
    },
    output: {
        path: dstPath,
        filename: '[name].js'
    },
    plugins: [
        new ExtractTextPlugin('[name].min.css')
    ]
};

以及GitHub 上的演示项目。