Webpack 4:SCSS将CSS转换为单独的文件

Question

我想使用Webpack 4来单独转换我的ES6 Javascript与Sass分开:

• src/js/index.js→static/js/index.js
• src/css/style.scss→static/css/style.css

目前我的webpack配置似乎正确地将javascript转换为bundle.js但我无法正确地将我的SCSS转换为CSS.

我肯定会尝试以某种方式调试,但由于我对Webpack内部非常无知,我不知道该怎么做.

关注我的webpack.config.js:

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

module.exports = {

  mode: 'development',

  entry: {
    bundle: './src/js/index.js',
  },

  output: {
    filename: '[name].js',
    path: path.resolve('static/js')
  },

  module: {
    rules: [{
      test: /\.scss$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: [
          { loader: "css-loader" },     
          { 
            loader: "sass-loader",
            options: {
              includePaths: [
                path.resolve("./src/css")
              ]
            }
          },
        ]
      }),
    }]
  },

  plugins: [
    new ExtractTextPlugin({
      filename: path.resolve('static/css/style.css')
    })
  ],
}

Answer 1

尝试针对Webpack v4的mini-css-extract-plugin。

我创建了一个单独的webpack配置文件，看起来像...

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: './server/styles/styles.scss',
  output: {
    path: path.resolve(__dirname, 'public')
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "styles.css"
    })
  ],
  module: {
    rules: [
      {
        test: /\.s?css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  }
}

不知道为什么，但是它还会生成带有所需css包的javascript文件。

Answer 2

extract-text-webpack-plugin与webpack 4不兼容.

根据Michael Ciniawsky的说法:

extract-text-webpack-plugin达到了维护它变得太负担的程度,并且它不是第一次升级主要的webpack版本因为它的问题而变得复杂和繁琐

mini-css-extract-plugin可以解决这些问题.

有关此主题的更多信息,请参见此处