网络包 4 : SCSS to CSS into separate file

Question

我想使用 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')
    })
  ],
}

Answer 1

试试 mini-css-extract-plugin用于 webpack v4。

我创建了一个单独的 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 文件。