我无法弄清楚如何使用webpack sass-loader呈现css文件.
这是我的webpackconfig.js的样子：
module.exports = {
context: __dirname + "/app",entry: {
javascript: "./app.js",html: "./index.html"
},output: {
filename: "app.js",path: __dirname + "/dist"
},module: {
loaders: [
//JAVASCRIPT
{
test: /\.js$/,exclude: /node_modules/,loaders: ["babel-loader"],},//Index HMTML
{
test: /\.html$/,loader: "file?name=[name].[ext]",//Hotloader
{
test: /\.js$/,loaders: ["react-hot","babel-loader"],// SASS
{
test: /\.scss$/,loader: 'style!css!sass'
}
],}
}
如您所见,我正在使用文档中指定的sass-loader模块加载器.
{
test: /\.scss$/,loader: 'style!css!sass'
}
我的根看起来像这样：
Project Root:
app:
style.scss
dist:
?????? WTF is my css file??
webpack.config.js
我可以得到其他一切工作,如html和jsx babble加载器.
我只需在命令行中键入webpack即可.
我在使用sass loader做错了.
它是什么？
请帮忙.
解决方法
您正在使用样式加载器,默认情况下,它将您的CSS嵌入到Javascript中并在运行时注入它.
如果你想要真正的CSS文件而不是你的Javascript中嵌入的CSS,你应该使用ExtractTextPlugin.
基本配置是：
>添加var ExtractTextPlugin = require(‘extract-text-webpack-plugin’);到您的Webpack配置文件的顶部.
>将以下内容添加到Webpack配置中：
plugins: [
new ExtractTextPlugin('[name].css'),]
>将您的SASS加载程序配置更改为以下内容：
{
test: /\.scss$/,loader: ExtractTextPlugin.extract(
'style-loader',// backup loader when not building .css file
'css-loader!sass-loader' // loaders to preprocess CSS
)
}
这样做是将它可以在您的包中找到的所有CSS提取到一个单独的文件中.该名称将基于您的入口点名称,在您的情况下将导致javascript.css(来自您的配置的入口部分).
插件使用ExtractTextPlugin.extract-loader在代码中查找CSS并将其放在单独的文件中.例如,你给它的第一个参数是它在遇到async模块中的文件时应该回退到的加载器.通常,这几乎总是样式加载器.第二个参数告诉插件用什么加载器来处理CSS,在本例中是css-loader和sass-loader,但是经常使用postcss-loader之类的东西.
有关使用Webpack构建CSS的更多信息,请访问：https://webpack.github.io/docs/stylesheets.html#separate-css-bundle
