javascript - webpack css-loader解析失败

原文 标签 javascript css reactjs webpack webpack-style-loader

我使用的是webpack加载程序(css-loader / style-loader),但我不知道为什么下面的简单CSS代码,

body {
    background: blue;
} 


不断导致此错误,

ERROR in ./app/main.css 1:5
Module parse failed: Unexpected token (1:5)
You may need an appropriate loader to handle this file type.
> body {
    background: blue;
}
@ ./app/index.js 1:0-21


这是webpack.config.js的片段

const Paths = {
    app: __dirname + '/app',
    build: __dirname + '/build',
};
module: {
        rules: [
        {
            test: /\.css&/,
            use: [{loader: 'style-loader'},
                  {loader: 'css-loader'}],
            include: Paths.app
        }]
    }


这是我的package.json片段

"devDependencies": {
    "css-loader": "^1.0.0",
    "style-loader": "^0.21.0",
    "webpack": "^4.15.1",
    "webpack-cli": "^3.0.8"
  },


这是我第一次进行Webpack,css尝试,感谢您的宝贵时间

最佳答案

您必须导入CSS。

添加const s = require('./main.css');
index.js

让我知道您是否仍然遇到问题。

关于javascript - webpack css-loader解析失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51228534/

相关文章:

javascript - 调用 PHP 的 HTML 表单模糊 JQuery 函数调用

c# - 如何在应用程序中使用Facebook登录

javascript - 在onload之后添加pre标签不会生效

reactjs - 如何在 Typescript(输入组件)中使用 React Hook Form

reactjs - TypeError : Cannot read property 'getParam' of undefined. 使用 Jest 和 enzyme react 原生单元测试?

javascript - 如何在加载 DOM 之前开始加载 iframe

html - 并排排列 css 元素

css - Bootstrap导航栏如何使其全屏显示

javascript - 仅当滚动条位于顶部时,模式弹出窗 Eloquent 会显示在中心

javascript - 从自定义状态变量切换状态