css - css 加载器的模块解析失败错误
问题描述
我正在尝试在我的组件 .js 文件中加载一个 css 文件,但是这样做时我收到了这个错误:
./stories/styles.css 中的错误模块解析失败:意外令牌 (1:0) 您可能需要适当的加载程序来处理此文件类型。
我在 webpack.config.js 文件中添加了以下规则来处理加载程序,但仍然出现错误。
rules: [
{
test: /\.s?css$/,
use: ['style-loader', 'raw-loader', 'sass-loader', 'css-loader'],
include: [
path.resolve(__dirname, '../css/'),
],
},
我的 styles.css 文件如下所示:
.row {
display: flex;
flex-direction: row;
width: 100%;
}
.row.dark {
background: #303030;
}
.col {
width: calc(100% - 400px);
padding: 15px;
}
.row > .col:first-child {
border-right: 1px solid #ccc;
max-width: 400px;
}
我需要添加任何其他加载器吗?我什至尝试使用 import 而不是 require 来获取 styles.css 文件,但没有任何区别。
解决方案
Webpack 加载器从右到左处理,您需要将配置更改为:
rules: [
{
test: /\.scss$/,
use: ['style-loader', 'raw-loader', 'css-loader', 'sass-loader'],
include: [
path.resolve(__dirname, '../css/'),
],
},
- 我也不确定
raw-loader
这里的用途是什么,因为它用于将文件作为字符串加载 - 你可能不需要它
推荐阅读
- hyperledger-sawtooth - python中的锯齿rest api安装错误
- ios - 添加子视图后 UITableViewCell 高度不会更新
- c# - EF Core 如何创建关系模型
- laravel - Laravel Passport 在 Vue/Axios API 调用上突然返回 401
- python - 从多个数据帧进行插值
- go - 在 golang 中获取未定义的 rand.Shuffle
- json - 使用 ARM 模板为容器部署 Web 应用
- wordpress - 仅迁移 Wordpress 帖子,同时在新帖子上保留页面、主题和插件
- angular - Angular 6中的HTML标签Textarea在屏幕顶部创建白色块
- wordpress - WordPress 缩略图为我的 src 图像添加了高度和重量