使用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文件的一個exerpt（入口點）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文件。

您需要的只是插件的一個實例，它將累積所有CSS，並且只有一個規則用於scss和css文件。

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

這將處理scss和css文件，並將它們全部放在一個單獨的輸出CSS文件中。