Webpack 4从scss中提取css而不是从编译文件中删除sass文件

Question

在在这里写这个问题之前，我已经经历了很多关于 stackoverflow 和文章的问题。 我成功地使用 webpack4 创建了 CSS 文件 sass。

我有如下文件client.js，它导入scss

import React , { Component } from 'react'
import { connect } from 'react-redux';
import './jobcard.scss';

这是我的 webpack 配置。

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

module.exports = {
  entry: {
    client: './src/client.js',
  },
  output: {
    path: path.resolve(__dirname, 'asset'),
    filename: "[name].js"
  },
  module: {
    rules: [
        { 
          test: /\.js$/,
          exclude: /node_modules/,
          loader: "babel-loader"
       },
       {
        test: /\.scss$/,
        use: [
            MiniCssExtractPlugin.loader,
            "css-loader",
            "sass-loader"
          ]
       },
    ]
 },
 plugins: [
  new MiniCssExtractPlugin({
    filename: 'main.css',
  })
]

}

它成功创建了 main.css 并存储在“/asset”文件夹中。 但问题是当我使用 babel 编译 client.js 时。它在这条线的下方。

require("./jobcard.scss");

由于上面的行而中断，因为在 dist 文件夹中没有这样的 scss 文件，因为它被提取并放置在“asset”文件夹中。我希望我的 css/图像在“资产”文件夹中。

我的期望是我的最终 css 移动到现在正在发生的 '/asset' 文件夹，并且上面的行应该从已编译的 client.js 文件中删除。 所以我可以从资产位置引用我的 index.html 上的 main.css。

Answer 1

试试这个config 看看它是否适合你

module: {
        rules: [{
                test: /\.scss$/,
                use: [
                    'style-loader',
                    MiniCssExtractPlugin.loader,
                    {
                        loader: "css-loader",
                        options: {
                            minimize: true,
                            sourceMap: true
                        }
                    },
                    {
                        loader: "sass-loader"
                    }
                ]
            }
        ]
    }