主页 / 问题 / 1423523
Accepted
Александр
Asked:2022-08-24 19:35:42 +0000 UTC2022-08-24 19:35:42 +0000 UTC

webpack css 文件连接

  • 772

我正在尝试处理 css 模块，但首先，只需连接项目中的 css 文件。有以下代码：

包.json

{
"name": "test-css-modules",
"version": "0.0.0",
"description": "",
"main": "index.js",
"scripts": {
    "start": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.2.5",
    "babel-preset-env": "^1.7.0",
    "css-loader": "^6.7.1",
    "mini-css-extract-plugin": "^2.6.1",
    "style-loader": "^3.3.1",
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0"
}
}

webpack.config.js

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

module.exports = {
entry: './src',
output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js',
},
mode: 'development',
module: {
    rules: [
        {
            test: /\.js/,
            use: 'babel-loader',
            include: __dirname + '/src',
        },
        {
            // test: /\.css/,
            test: /\.css$/i,
            use: [MiniCssExtractPlugin.loader, 'css-loader'],
            // use: ['style', 'css'],
            // use: ['style-loader', 'css-loader'],
            include: __dirname + '/src',
        },
    ],
},
};

index.js

// import './app.css';
require('./app.css');

应用程序.css

body {
    background-color: bisque;
}

当我编译时，我得到以下信息：

asset bundle.js 3.19 KiB [emitted] (name: main)
./src/app.css 134 bytes [built] [code generated] [1 error]

ERROR in ./src/app.css 1:5
Module parse failed: Unexpected token (1:5)
You may need an appropriate loader to handle this file type, currently no loaders are 
configured to process this file. See https://webpack.js.org/concepts#loaders
> body {
|       background-color: bisque;
| }
@ ./src/index.js 6:0-20

webpack 5.73.0 compiled with 1 error in 125 ms

在没有 css、常规 js 的情况下进行测试时，一切正常。尝试设置 css 连接错误。我尝试了不同的选项，它们在代码中被注释掉，但没有任何帮助。告诉我我做错了什么

javascript css

2 个回答

  1. Best Answer

    在操作过程中，我的解决方案之一是将 webpack.config.js 更改如下：

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

module.exports = {
entry: './src',
output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js',
},
mode: 'development',
plugins: [new MiniCssExtractPlugin()],
module: {
    rules: [
        {
            test: /\.js/,
            use: 'babel-loader',
            include: __dirname + '/src',
        },
        {
            test: /\.css/,
            use: ['style-loader', 'css-loader'],

            // следующие два варианта запрещены к использованию
            // use: ['style', 'css'],
            // use: 'style-loader!css-loader',

            // ошибка была из-за этой строки
            // include: __dirname + '/src',
        },
    ],
},
resolve: {
    extensions: ['', '.js', '.jsx', '.css']
}
};

    我不确定这个选项是否绝对正确和正确，但它确实有效。

    • 1

  2. 最有可能的错误是您plugins没有正确的引导加载程序。尝试添加

    // ...
mode: 'development',
plugins: [new MiniCssExtractPlugin()],
module: {
// ...

    在MiniCssExtractPlugin 插件的官方文档中。

    • 0

相关问题