将React与webpack一起使用.
通过一些文章,但大多数建议为每个组件调用单独的scss文件.但我想将所有css预编译为整个应用程序的单个文件,就像我们使用grunt / gulp一样. @H_403_3@
通过一些文章,但大多数建议为每个组件调用单独的scss文件.但我想将所有css预编译为整个应用程序的单个文件,就像我们使用grunt / gulp一样. @H_403_3@
解决方法
您可以使用负责编译所有css文件的
webpack-text-extract-pluggin并将它们捆绑在index.css文件中.
@H_403_3@另请注意,您还需要安装sass-loader才能编译scss.
@H_403_3@在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')
}
]
}
}
@H_403_3@在index.html中：
<link rel="stylesheet" type="text/css" href="/index.css">@H_403_3@在通过webpack获取的任何Javascript文件中：
require("./styles/my-custom-file.scss");
