Webpack - 如何确定CSS文件的输出风格?

时间:2017-09-05 16:12:54

标签: css webpack sass

当使用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
        })
    ]
}

提前致谢!

2 个答案:

答案 0 :(得分:1)

您正在使用sass-loader,它使用了node-sassreadme表示您可以通过指定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。

这是使用以下方法的最新工作模型:

  • “ webpack”:“ ^ 4.44.1”,
  • “ sass-loader”:“〜9.0.3”,
{
    test: /.scss$/,
    use: ExtractTextPlugin.extract({
        fallbackLoader: "style-loader",
        use: [
          {
            loader: 'css-loader'
          }, 
          {
            loader: 'sass-loader',
            options: {
              sassOptions: {
                outputStyle: 'expanded'
              }
            }
          }
        ]
    })
}