我不能为我的生活弄明白如何使用web pack 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 moduel loader。
{
test: /\.scss$/,loader: 'style!css!sass'
}
我的根看起来像这样：
Project Root:
app:
style.scss
dist:
?????? WTF is my css file??
webpack.config.js
我可以得到一切工作，如html和jsx babble装载机。 bla bla。
我只是键入webpack到命令行和事情发生。
我做了一些错误的萨斯加载程序。
它是什么？
请帮忙。
解决方法
您正在使用style-loader，默认情况下，它将您的CSS嵌入到Javascript中，并在运行时注入它。
如果你想要真正的CSS文件，而不是CSS嵌入你的Javascript，你应该使用ExtractTextPlugin。
基本配置将是：
> Add var ExtractTextPlugin = require(‘extract-text-webpack-plugin’);到您的Webpack配置文件的顶部。
>将以下内容添加到您的Webpack配置：
plugins: [
new ExtractTextPlugin('[name].css'),]
>将SASS加载程序配置更改为以下内容：
{
test: /\.scss$/,loader: ExtractTextPlugin.extract(
'style',// backup loader when not building .css file
'css!sass' // loaders to preprocess CSS
)
}
这是什么是提取所有的CSS它可以找到你的捆绑包到一个单独的文件。该名称将基于您的entrypoint名称，在您的情况下将导致javascript.css(从您的配置的条目部分)。
ExtractTextPlugin.extract-loader由插件用于在代码中查找CSS并将其放在单独的文件中。你给它的第一个参数是它应该回退到，如果它遇到一个异步模块中的文件，例如加载器。通常这是几乎总是风格。第二个参数告诉插件使用什么加载器来处理CSS，在这种情况下是css-loader和sass-loader，但是postcss之类的东西也经常使用。
有关使用Webpack构建CSS的更多信息，请访问：https://webpack.github.io/docs/stylesheets.html#separate-css-bundle
