R
R
Roman Govorov2021-03-05 21:57:26
webpack
Roman Govorov, 2021-03-05 21:57:26

WebPack how to fix not cacheable error when importing .css?

An error occurs when starting webpack --config webpack.config.js:

./js/rstheme-sctipt.js 20.9 KiB [built] [code generated]
./css/default.css 39 bytes [not cacheable] [built] [code generated] [1 error]

ERROR in ./css/default.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
Error: Cannot find module 'D:\My Projects\#JOB\diadoc\wp-content\themes\rstheme\node_modules\mini-css-extract-plugin\dist\loader.js'


webpack.config.js:
const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
    mode: 'production',
    entry: './index.js',
    context: path.resolve(__dirname, "js"),
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, "assets")
    },
    watch: true,
    plugins: [
        new MiniCssExtractPlugin()
    ],
    module: {
        rules: [
            {
              test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            ident: 'postcss',
                            plugins: [
                                require('autoprefixer')
                            ]
                        }
                    }
                ]
            },
        ]
    }
}


index.js:
import './rstheme-sctipt';
import "../css/default.css";

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question