与webpack 2合编/出口sass
与webpack 2合编/出口sass
提问于 2017-02-16 03:59:10
我以前用过格伦特和古普，所以webpack对我来说还是有点新的。
现在，我已经将webpack配置成完美地捆绑了我的javascript。我现在面临的问题是捆绑我的sass并将结果输出到一个文件中。
我的理解是，我必须使用extract-text-webpack-plugin将样式提取到自己的文件中，而不是在<head>中的内联中，但我不确定这一部分。我想为sass做以下几件事：
- 编译
src/main/stylesheets/**/*.scss的内容 - 将内容输出到单个文件
app/assets/stylesheets/bundle.css
我知道我很容易就能做到这一点，但我正在努力学习webpack是如何做事的。我的webpack.config.babel.js如下：
import path from "path";
import ExtractTextPlugin from "extract-text-webpack-plugin";
export default {
entry: {
index: path.join(__dirname, "src/main/javascripts/application.js")
},
output: {
path: path.join(__dirname, "app/assets/javascripts/"),
publicPath: "/assets/",
filename: "bundle.js"
},
module: {
rules: [
{
test: /\.scss$/,
include: path.join(__dirname, "src/main/stylesheets/"),
loader: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [
{
loader: "css-loader",
query: { modules: false, sourceMaps: true }
},
{
loader: "sass-loader",
query: { sourceMaps: true }
}
]
})
},
{
test: /\.js$/,
include: path.join(__dirname, "src/main/javascripts/"),
exclude: /node_modules/,
use: [
{ loader: "babel-loader" }
],
}
]
},
plugins: [
new ExtractTextPlugin(path.join(__dirname, "app/assets/stylesheets/bundle.css"))
]
}如果这很重要，则来自package.json的依赖：
"dependencies": {
"bootstrap-sass": "^3.3.7",
"jquery": "^3.1.1"
},
"devDependencies": {
"babel-core": "^6.23.1",
"babel-loader": "^6.3.1",
"babel-preset-env": "^1.1.8",
"css-loader": "^0.26.1",
"extract-text-webpack-plugin": "^2.0.0-rc.3",
"node-sass": "^4.5.0",
"sass-loader": "^6.0.0",
"style-loader": "^0.13.1"
}回答 1
Stack Overflow用户
发布于 2017-02-16 15:48:48
张贴在这里，因为没有真正的空间在comments...if，你有一个链接的回购，我可能会更有帮助。您的语法不一定是错误的，但我在文章中提到这一点，因为这是我所知道的最新示例:您可能希望尝试使用option而不是query。根据文档不支持查询，但是这个设置对我有效(虽然我这里没有使用解压缩)，
{
test: /\.scss$/,
use: [
'style-loader?sourceMap',
{
loader: 'css-loader',
options: {
sourceMap: true,
importLoaders: 2,
}
},
'postcss-loader?sourceMap',
'sass-loader?sourceMap'
],
exclude: [path.resolve('node_modules')],
},页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42264652
复制相关文章
相似问题
腾讯云开发者
