Webpack - 如何确定 CSS 文件的输出样式? [英] Webpack - how to determine output style of CSS file?
问题描述
当使用 Gulp 将 Sass 转换为 CSS 时,我可以选择 CSS 文件的输出样式:嵌套、扩展、紧凑和压缩.我有同样的机会使用 Webpack 吗?如果是,你能告诉我如何配置 Webpack 来实现我的目标吗?
When using Gulp to convert Sass to CSS, I can choose output style of the CSS file between: nested, expanded, compact and compressed. Do I have the same opportunity using Webpack? If yes, can you show me how to configurate Webpack to achieve my goal?
下面是我当前的 webpack.config.js - 它将 sass 转换为 css,将 ES6 转换为 ES5 并且完美运行:
Below is my current webpack.config.js - it converts sass to css, translate ES6 to ES5 and it works perfectly:
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
})
]
}
提前致谢!
推荐答案
您正在使用 sass-loader
,它在底层使用了 node-sass
.自述文件 说您可以将选项直接传递给 node-sass
通过指定 options
属性.您可以通过这种方式传入 outputStyle
设置.它看起来像这样:
You are using sass-loader
, which uses node-sass
under the hood. The readme says that you can pass options directly to node-sass
by specifying an options
property. You can pass in the outputStyle
setting this way. It would look like this:
{
test: /.scss$/,
use: ExtractTextPlugin.extract({
fallbackLoader: "style-loader",
use: [{
loader: 'css-loader'
}, {
loader: 'sass-loader',
options: {
outputStyle: 'expanded'
}
}]
})
}
这篇关于Webpack - 如何确定 CSS 文件的输出样式?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!