如何在webpack中将scss预编译为单个css文件?

前端之家收集整理的这篇文章主要介绍了如何在webpack中将scss预编译为单个css文件?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
将React与webpack一起使用.
通过一些文章,但大多数建议为每个组件调用单独的scss文件.但我想将所有css预编译为整个应用程序的单个文件,就像我们使用grunt / gulp一样.

解决方法

您可以使用负责编译所有css文件webpack-text-extract-pluggin并将它们捆绑在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$/,'css!sass')
            }
        ]
    }
}

在index.html中:

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

在通过webpack获取的任何Javascript文件中:

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

猜你在找的CSS相关文章