javascript - 使用 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 文件中。