css - 为什么 webpack 对提取的 css/sass 文件不报错

Question

在我的电子反应项目中，我一直在尝试提取 css 文件，但没有成功，如果我使用样式加载器，它工作正常，但是当尝试将其提取到单独的 css 文件时，它没有找到它。这是它在 gitbash 控制台中给我的错误：

ERROR in ./src/index.js 4:0-23
    [0] Module not found: Error: path argument is not a string
    [0]
    [0] ERROR in ./src/index.js 5:0-30
    [0] Module not found: Error: path argument is not a string
    [0]
    [0] webpack 5.24.2 compiled with 2 errors in 2746 ms

这是它在index.js中引用的代码：

import 'normalize.css'
import './styles/styles.scss'

这是我的webpack.config.js文件：

    const path = require('path')
const webpack = require('webpack')
const miniCSSExtractPlugin = require('mini-css-extract-plugin')

process.env.NODE_ENV = process.env.NODE_ENV || 'development';

if (process.env.NODE_ENV === 'test') {
    require('dotenv').config({ path: '.env.test' });
} else if (process.env.NODE_ENV === 'development') {
    require('dotenv').config({ path: '.env.development' });
}

module.exports = (env) => {
    const isProduction = env === 'production'
    const CSSExtract = new miniCSSExtractPlugin({
        filename: 'styles.css'
    })
    const isDev = isProduction ? 'production' : 'development'
    return {
        mode: isDev,
        entry: './src/index.js',
        devtool: isProduction ? 'source-map' : 'inline-source-map',
        target: 'electron-renderer',
        module: {
            rules: [
                {
                    test: /\.(js|jsx)$/,
                    exclude: /node_modules/,
                    use: {
                        loader: 'babel-loader'
                    }
                },
                {
                    test: [/\.s[ac]ss$/i, /\.css$/i],
                    use: [{loader: CSSExtract.loader}, {loader: 'css-loader'}, {loader: 'sass-loader'}]
                }
            ]
        },
        plugins: [
            CSSExtract,
            new webpack.DefinePlugin({
                'process.env.FIREBASE_API_KEY': JSON.stringify(process.env.FIREBASE_API_KEY),
                'process.env.FIREBASE_AUTH_DOMAIN': JSON.stringify(process.env.FIREBASE_AUTH_DOMAIN),
                'process.env.FIREBASE_DATABASE_URL': JSON.stringify(process.env.FIREBASE_DATABASE_URL),
                'process.env.FIREBASE_PROJECT_ID': JSON.stringify(process.env.FIREBASE_PROJECT_ID),
                'process.env.FIREBASE_STORAGE_BUCKET': JSON.stringify(process.env.FIREBASE_STORAGE_BUCKET),
                'process.env.FIREBASE_MESSAGING_SENDER_ID': JSON.stringify(process.env.FIREBASE_MESSAGING_SENDER_ID)
            })
        ],
        resolve: {
            extensions: ['.js'],
        },
        output: {
            path: path.resolve(__dirname, 'public', 'dist'),
            filename: 'app.js'
        }
    }
}

我确实在我的 index.html 中导入了输出文件，这是我的.babelrc文件：

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ]
}

标签： csswebpacksassextract