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就是为了克服这些问题。

有关此主题的详情，请参阅here

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

2 个答案: