Javascript webpack sass css文件在哪里
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29210325/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Webpack sass where is the css file
提问by adc
I am using web pack with sass loader like this:
我正在使用带有 sass 加载器的 web pack，如下所示：
module.exports = {
module: {
loaders: [
{
test: /\.scss$/,
loader: "style!css!sass"
}
]
}
};
But i see the styles apply to the style tag, where is the generate css file?
但是我看到样式适用于样式标签，生成的 css 文件在哪里？
回答by adc
By default, the style-loader inlines the compiled css into your bundle, which are added to the head of the page with the output file e.g. bundle.js. Using the extract-text-webpack-pluginyou can remove the compiled css from the bundle, and export it to a separate file.
默认情况下，样式加载器将编译后的 css 内联到您的包中，这些包被添加到带有输出文件的页面的头部，例如bundle.js. 使用extract-text-webpack-plugin可以从包中删除编译的 css，并将其导出到一个单独的文件。
First - wrap your loader in the plugin:
首先 - 将您的加载器包装在插件中：
loaders: [{
test: /\.scss$/,
loader: ExtractTextPlugin.extract(
"style",
"css!sass")
}]
},
Then tell the plugin what to call the file it generates:
然后告诉插件如何调用它生成的文件：
plugins: [
new ExtractTextPlugin("app.css")
]
Include this file in your HTML normally.
通常将此文件包含在您的 HTML 中。
回答by zkhan
If you want a separate CSS file when using Webpack, you need to use the extract-text-webpack-plugin.
如果在使用 Webpack 时需要单独的 CSS 文件，则需要使用extract-text-webpack-plugin。
回答by Mike Dalrymple
The extract-text-webpack-plugin has been deprecated you should use the mini-css-extract-plugin. Assuming you have your styles in css/app.scss, your entry file should import it as usual like:
extract-text-webpack-plugin 已被弃用，您应该使用mini-css-extract-plugin。假设你有你的样式css/app.scss，你的入口文件应该像往常一样导入它：
import 'css/app.scss';
Add the plugin:
添加插件：
plugins: [new MiniCssExtractPlugin()]
And add the plugin to your loader chain:
并将插件添加到您的加载器链中：
{
test: /\.s[ac]ss$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
}
When you run webpack with that configuration you'll end up with an app.cssfile loaded in your HTML with a tag similar to:
当您使用该配置运行 webpack 时，您最终会app.css在 HTML 中加载一个文件，其标签类似于：
<link href="app.css" rel="stylesheet">
