webpack:你如何将所有的scss文件捆绑到一个main.css文件中
我正在制作一个反应应用程序,所以我的文件结构有一个包含每个组件文件夹的组件文件夹。每个组件文件夹包含ComponentName.js
和ComponentName.scss
文件。如何配置我的webpack,以便我可以在我的index.html的头部添加一个<link rel="stylesheet" href="main.css" />
?webpack:你如何将所有的scss文件捆绑到一个main.css文件中
我在我的webpack配置中有ExtractTextPlugin,但我不确定是否应该使用它,因为我不需要任何css文件。我也在寻找一个scss加载器,但只能找到sass加载器,所以我应该使用它?
您或许可以使用HTML Webpack Plugin进行此项工作。这可以将您的index.html作为输入模板,并自动将脚本和链接标签注入到其中。所以它可以将你的main.css和你的js包注入你的html页面。它对ExtractTextPlugin非常有用。
我有以下配置类似的东西:
我的装载机:
module: {
loaders: [{
test: /critical\.scss$/,
loader: ExtractTextPlugin.extract(['css', 'postcss', 'sass'])
}]
}
我的插件:
plugins: [
new ExtractTextPlugin('css/critical.css'),
new HtmlWebpackPlugin({
template: 'src/index.html'
})
]
有了这个方法,我需要在代码中SCSS文件,只需在您的应用程序组件中执行此操作,并且您可以让您的scss文件导入其他scss文件。我正在使用sass-loader与post-loader和css-loader相结合。我使用后装载器,所以我可以使用autoprefixer。我有一个项目为基于Esri的应用程序做了类似的工作,除了我使用自定义插件将css内联到头部并为折叠内容下面添加样式标记。你可以在这里找到https://github.com/Robert-W/esri-redux。
注:我仍然自己学习webpack,所以这可能不是最好的设置,但它适用于我。
您可以使用负责编译所有CSS文件并将它们捆绑到index.css文件中的webpack-text-extract-pluggin。
另外请注意,您也需要安装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");