当使用Gulp将Sass转换为CSS时,我可以选择CSS文件的输出样式:嵌套,扩展,压缩和压缩。我是否有同样的机会使用Webpack?如果是的话,你能告诉我如何配置Webpack以实现我的目标吗?
下面是我当前的webpack.config.js - 它将sass转换为css,将ES6转换为ES5,它完美运行:
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: [
"./js/app.js",
"./scss/main.scss"
],
output: {
filename: "./js/out.js"
},
watch: true,
module: {
loaders: [
{
test: /.js$/,
exclude: /node_modules/,
loader: "babel-loader",
query: {
presets: ["es2015"]
}
}
],
rules: [
{
test: /.scss$/,
use: ExtractTextPlugin.extract({
fallbackLoader: "style-loader",
use: ["css-loader?-url", "sass-loader?-url"]
})
}
]
},
plugins: [
new ExtractTextPlugin({
filename: "./css/main.css",
disable: false,
allChunks: true
})
]
}
提前致谢!
答案 0 :(得分:1)
您正在使用sass-loader
,它使用了node-sass
。 readme表示您可以通过指定node-sass
属性将选项直接传递给options
。您可以通过这种方式传递outputStyle
设置。它看起来像这样:
{
test: /.scss$/,
use: ExtractTextPlugin.extract({
fallbackLoader: "style-loader",
use: [{
loader: 'css-loader'
}, {
loader: 'sass-loader',
options: {
outputStyle: 'expanded'
}
}]
})
}
答案 1 :(得分:0)
@Arnelle Balane 这个打勾的解决方案不适用于升级的webpack和sass-loader。
这是使用以下方法的最新工作模型:
{
test: /.scss$/,
use: ExtractTextPlugin.extract({
fallbackLoader: "style-loader",
use: [
{
loader: 'css-loader'
},
{
loader: 'sass-loader',
options: {
sassOptions: {
outputStyle: 'expanded'
}
}
}
]
})
}