reactjs - Webpack 错误 - 您可能需要适当的加载器来处理此文件类型,目前没有配置加载器来处理此文件
问题描述
我正在学习使用 Webpack 构建我的反应项目。我已经配置了一个 webpack.config.js 来加载 CSS 文件。
webpack.config.js:
module.exports = {
...
module: {
rules: [
{
test: /\.css$/,
exclude: /(node_modules)/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
],
},
{
test: /\.scss$/,
exclude: /(node_modules)/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{ loader: 'sass-loader' },
],
},
...
],
},
...
}
npm 运行构建
出现了这个问题。
Module parse failed: Unexpected token (6:3) 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 | * Copyright 2011-2020 Twitter, Inc. | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) > */:root{--blue:#007bff;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8c;--red:#dc3545; ..... ```
我不明白应该怎么做。谢谢你。
解决方案
不知道为什么要排除node_modules
为什么仍然从那里导入 css,这意味着删除exclude: /(node_modules)/
then 就可以了:
{
test: /\.css$/,
// exclude: /(node_modules)/, // Remove this
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
],
},
推荐阅读
- php - 如果我有像 facebook 和 google 这样的社交登录,我应该让数据库中的电子邮件不唯一吗?
- python - pythonanywhere corsheaders 模块未找到错误
- visual-studio-code - VS代码。无法连接到扩展市场
- python-3.x - 使用名称取消异步任务
- visual-studio-code - 点总是替换 vs-code 中第一次打开的文件
- f# - 在 F# 中,如何使用列表索引更新/替换嵌套记录?
- python - 传递给 C++ .dll 的 Ctypes 参数打印出垃圾值
- php - 如何在 laravel 中包含扩展布局文件?
- java - Android中的ArrayList分页
- amazon-web-services - AWSCLI 中的 OR 逻辑过滤