Webpack - 如何确定 CSS 文件的输出样式？

Posted 2023-03-06

【中文标题】Webpack - 如何确定 CSS 文件的输出样式？

【英文标题】：Webpack - how to determine output style of CSS file?

【发布时间】：2018-02-14 00:12:49

【问题描述】：

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

提前致谢！

【参考方案1】：

@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'
              
            
          
        ]
    )

【参考方案2】：

您正在使用sass-loader，它在后台使用node-sass。 readme 表示您可以通过指定 options 属性将选项直接传递给 node-sass。您可以通过这种方式传入outputStyle 设置。它看起来像这样：

    test: /.scss$/,
    use: ExtractTextPlugin.extract(
        fallbackLoader: "style-loader",
        use: [
            loader: 'css-loader'
        , 
            loader: 'sass-loader',
            options: 
                outputStyle: 'expanded'
            
        ]
    )

【讨论】：

那个勾选的解决方案不适用于升级的 webpack 和 sass-loader。我已经为那些可能也在努力更新的人添加了一个答案