如何在webpack中將scss預編譯為單個css文件？

Question

將React與webpack一起使用。 通過一些文章，但大多數建議為每個組件調用單獨的scss文件。 但我想將所有css預編譯為整個應用程序的單個文件，就像我們使用grunt / gulp一樣。

Answer 1

您可以使用負責編譯所有css文件並將它們捆綁在index.css文件中的webpack-text-extract- index.css 。

另請注意，您還需要安裝sass-loader才能編譯scss。

在webpack配置中：

var ExtractTextPlugin = require('extract-text-webpack-plugin');
config = {
    ..., 
    plugins: [
        ...,
        new ExtractTextPlugin('index.css')
    ],
    module: {
        loaders: [
            ...
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract('style','css')
            },
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract('style', 'css!sass')
            }
        ]
    }
}

在index.html中：

<link rel="stylesheet" type="text/css" href="/index.css">

在通過webpack獲取的任何Javascript文件中：

require("./styles/my-custom-file.scss");

Answer 2

你可以看一下extract-text-webpack-plugin 。

在webpack.config.js中要求之后：

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

您可以將您的sass加載程序重寫為：

module: {
    loaders: [
        {test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
        {test: /\.scss$/, loader: ExtractTextPlugin.extract('style', 'css', 'sass')}
    ]
},
plugins: [
    new ExtractTextPlugin('bundle.css')
]

有關更多選項和用法，請查看上面的鏈接。