Webpack 4：SCSS 到 CSS 到单独的文件中答案

【问题标题】：Webpack 4: SCSS to CSS into separate fileWebpack 4：SCSS 到 CSS 到单独的文件中
【发布时间】：2018-09-22 18:33:45
【问题描述】：

我想使用 Webpack 4 将我的 ES6 Javascript 与我的 Sass 分开转译：

src/js/index.js → 静态/js/index.js
src/css/style.scss → 静态/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')
    })
  ],
}

【问题讨论】：

标签： webpack

【解决方案1】：

extract-text-webpack-plugin 在 webpack 4 中表现不佳。

根据迈克尔 Ciniawsky 的说法：

extract-text-webpack-plugin 已经到了维护它变得负担过重的地步，这不是第一次升级主要的 webpack 版本因为它的问题而变得复杂和麻烦

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

有关此主题的更多信息，请参阅here

【讨论】：

【解决方案2】：

在 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 文件。

【讨论】：