试图在Webpack中包含一些CSS导致错误

Question

看，我的文件夹结构是这样的：

• js
  • bundle.js
  • custom.js
• css
  • main.css
• style.css
• app.js
• webpack.config.js

我的索引链接到app.js，问题是webpack配置无法编译fils（显然），这是我要使事情更清楚的意思：

var path = require('path');

module.exports = {
    mode: 'development',
    entry: './app.js',
    module: {
        rules: [
        { 
            test: /\.css$/, use: [ 'style-loader', 'css-loader' ],
            include: [
            path.resolve(__dirname, 'js/custom.js'),
            path.resolve(__dirname, 'js/owl-carousel.js'),
            ]
        }
        ]
    },
    output: {
        path: path.resolve(__dirname),
        filename: 'bundle.js'
      }
};

它一直困扰着我一个错误：

我的app.js上有这个

require('./style.css');

我在做错事吗？

Answer 1

使用MiniCssExtractPlugin加载程序，该加载程序将提取CSS并写入新的CSS文件。

var MiniCssExtractPlugin = require（“ mini-css-extract-plugin”）; 将它们添加到您的webpack配置中：

rules: [

   {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader'
      }
    },
    {
      test: /\.css$/,
      use:  [  'style-loader', MiniCssExtractPlugin.loader, 'css-loader']
    }
  ]
}
plugins: [
  new MiniCssExtractPlugin({
    filename: 'style.css',
  }),

让我知道您问题仍然存在