使用 WebPack 将 SCSS 和 CSS 合并到一个文件中

Question

我是 webpack 的新手，我无法理解如何获取一堆 scss 文件和 css 文件并将它们与 webpack 合并在一起（当然是在转译 sass 之后）。

使用 gulp，这真的很明显，因为我可以先将 sass 转换为 css，然后再将它们连接在一起。 然而，使用 webpack，看起来一切都是同时发生的。

这是一个非常基本的要求，我相信对于那些更有经验的人来说有一个明显的答案。

我已经到了可以成功地将转译后的 scss 输出到 css 并从 css 输入中单独输出 css 文件的地步，但我不知道如何使用 webpack 将它们粘在一起。

下面是我的 webpack.config.js 文件：

const path = require('path');
const webpack = require('webpack');

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

const extractCSS = new ExtractTextPlugin('extractedCSS.css');

const extractSass = new ExtractTextPlugin({
    filename: "extractedSASS.css",
    disable: process.env.NODE_ENV === "development"
});

module.exports = function (env) {
    return {
        context: path.resolve(__dirname, './wwwroot/app'),
        entry: {
            main: './index.js',
            vendor: 'moment'
        },
        output: {
            filename: '[name].[chunkhash].js',
            path: path.resolve(__dirname, './wwwroot/mytempdist')
        },
        module: {
            rules: [{
                test: /\.css$/,
                use: extractCSS.extract({
                    use: 'css-loader'
                })
            },
            {
                test: /\.scss$/,
                use: extractSass.extract({
                    use: [{
                        loader: "css-loader"
                    }, {
                        loader: "sass-loader"
                    }],
                    // use style-loader in development
                    fallback: "style-loader"
                })
            }
            ]
        },
        plugins: [
            new webpack.optimize.CommonsChunkPlugin({
                name: 'vendor',
                minChunks: function (module) {
                    // this assumes your vendor imports exist in the node_modules directory
                    return module.context && module.context.indexOf('node_modules') !== -1;
                }
            }),
            //CommonChunksPlugin will now extract all the common modules from vendor and main bundles
            new webpack.optimize.CommonsChunkPlugin({
                name: 'manifest' //But since there are no more common modules between them we end up with just the runtime code included in the manifest file
            }),
            //new webpack.optimize.UglifyJsPlugin({
            //    sourceMap: options.devtool && (options.devtool.indexOf("sourcemap") >= 0 || options.devtool.indexOf("source-map") >= 0)
            //}),
            extractSass,
            extractCSS
        ],
        devtool: 'inline-source-map'
    }
}

如何修改上面的，让sass和css都进入文件css输出文件？

如果有什么不同，下面是我的 index.js 文件（入口点）的摘录，toastr 是一个 npm 包，pace 只是一个正常下载的 css 文件：

var toastr = require('toastr');
import 'toastr/toastr.scss';

import pace from './../lib/pace/pace.min.js';
import './../lib/pace/pace.css';

Answer 1

您有 2 个使用明确名称定义的 ExtractTextPlugin 实例，您使用这些单独的实例分别加载 css 和 scss 文件。

您只需要 1 个插件实例，它将累积所有 CSS，并且只需要一个适用于 scss 和 css 文件的规则。

{
    test: /\.s?css$/,
    use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: ['css-loader', 'sass-loader']
    })
}

这将处理 scss 和 css 文件，并将它们全部放在一个输出 CSS 文件中。