Question

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

有了gulp，这是非常明显的，因为我可以有一步将sass转换为css然后再一步将它们连接在一起。但是对于webpack，看起来所有事情都在同一时间发生。

这是一个非常基本的要求，我确信对那些经验丰富的人有明显的答案。

我已经能够成功地将已转换的scss输出到css并从css输入中单独输出一个css文件，但我无法弄清楚如何使用webpack将它们粘在一起。 / p>

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

＆＃13;

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'
    }
}

＆＃13;

如何修改上述内容以使sass和css都进入文件css输出文件？

包含它会有所不同，下面是我的index.js文件（入口点）的exertr toastr是一个npm包，步伐只是一个正常下载的css文件：

＆＃13;

var toastr = require('toastr');
import 'toastr/toastr.scss';

import pace from './../lib/pace/pace.min.js';
import './../lib/pace/pace.css';

＆＃13;

Answer 1

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

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

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

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

使用WebPack将SCSS和CSS组合到单个文件中

1 个答案: