1

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?

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
        })
    ]
}

Thanks in advance!

Kamil
  • 35
  • 8

3 Answers3

1

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'
            }
        }]
    })
}
Arnelle Balane
  • 5,437
  • 1
  • 26
  • 32
  • That ticked solution won't work with upgraded webpack and sass-loader. I have added an answer for those that might also be struggling with updates – Steve Tomlin Oct 30 '20 at 07:04
1

@Arnelle Balane That ticked solution won't work with upgraded webpack and sass-loader.

This is the latest working model using:

  • "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'
              }
            }
          }
        ]
    })
}
Steve Tomlin
  • 3,391
  • 3
  • 31
  • 63
0

UPDATE Wepback 5: ExtractTextplugin is now replace to MiniCSSExtraPlugin.

     use: [
        
        MiniCssExtractPlugin.loader,
        { 
          loader: 'css-loader',
          options: {
            sourceMap: true,
            
          }
        },
        {
          loader: 'sass-loader',
          options: {
            sourceMap: true,
            sassOptions: {
              outputStyle: "expanded",
            },
          }
        },

      ]
Angelic Sanoy
  • 1
  • 4