Webpack - CSSファイルの出力スタイルを決定する方法は？

Question

Gulpを使ってSassをCSSに変換するとき、CSSファイルの出力スタイルをネスト、エキスパンド、コンパクト、圧縮の中から選択できます。私はWebpackを使用して同じ機会を持っていますか？はいの場合、目標を達成するためにWebpackを設定する方法を教えてください。以下は

私の現在のwebpack.config.jsである - それはES5にES6を翻訳し、CSSにSASSを変換し、それが完璧に動作します：事前に

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

ありがとう！

Answer 1

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