將SCSS編譯爲CSS並同時將ES6轉換爲ES5

所以我有一個名爲style.scss的SCSS文件。我有一個名爲script.js的ES6文件。這兩個文件都位於./src/目錄中。將SCSS編譯爲CSS並同時將ES6轉換爲ES5

我想使用Webpack取style.scss，將其轉換爲CSS並將其粘貼到名爲./dist/的文件夾中，其文件名爲style.css。我實際上可以做到這一點。

我也想的WebPack採取script.js，transpile到ES5，並提出，在相同的./dist/文件夾名爲script.js文件。我也可以做到這一點。

我不能做的是讓兩者同時發生。這是Webpack甚至可以做的事情嗎？在這種情況下，我不希望所有的樣式都放入我的JS中，我特別希望它們像標準網站一樣保存在單獨的文件中（因爲這就是這種情況）。

我已經得到的最接近的是：

const ExtractTextPlugin = require('extract-text-webpack-plugin'); 

module.exports = { 
    entry: { 
     script: './src/script.js', 
     style: './src/style.scss' 
    }, 
    output: { 
     path: './dist', 
     filename: '[name].js' 
    }, 
    module: { 
     rules: [ 
     { 
      test: /\.scss$/, 
      use: ExtractTextPlugin.extract({ 
      fallback: "style-loader", 
      use: ['css-loader', 'sass-loader'] 
      }) 
     } 
     ] 
    }, 
    plugins: [ 
     new ExtractTextPlugin('style.css') 
    ] }

但是，這給了我一個script.js文件，style.css文件，也是一個style.js文件，該文件是一個爛攤子。

有什麼建議嗎？

來源

2017-03-15 Sonya Baled

您不想爲CSS創建單獨的入口點。您可以在script.js中導入style.scss，也可以將其添加到相同的條目中。一個條目也可以是一個數組，並且webpack會將它們包含在同一個包中，並且無論如何都會提取CSS，因此實際上不會有任何其他JavaScript。您的輸入如下：

entry: { 
    script: ['./src/script.js', './src/style.scss'] 
},

來源

2017-03-15 17:23:07

將SCSS編譯爲CSS並同時將ES6轉換爲ES5

回答

相關問題