webpack搭建项目时出现的报错“Module build failed (from ./node_modules/css-loader/dist/cjs.js) CssSyntaxError”...

在使用Webpack构建项目时遇到' Module build failed (from ./node_modules/css-loader/dist/cjs.js) CssSyntaxError'的问题。错误源于CSS加载器配置或CSS语法错误。检查webpack.config.js的css-loader配置,确保正确引用和安装了相关依赖,如css-loader和style-loader。同时,检查CSS文件中的语法是否正确,避免导入路径错误或CSS语法错误。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

控制台出现的错误如下:

                

 

webpack.config.js中的配置如下:

module.exports={
    entry:'./src/main.js',
    output:{
      path:__dirname,
      filename:'dist/app.js'
    },
    module:{
        rules:[
            {test:/\.js/,loader:'babel-loader',exclude:/node_modules/},
            {test:/\.css/,loader:'css-loader!style-loader'},
            {test:/\.(png|jpeg|jpg|ttf|gif)/,loader:'file-loader'}
        ]
    },
    devServer:{
        disableHostCheck:true
    }
}

  package.json中安装信息如下:

     

"devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^2.0.2",
    "file-loader": "^3.0.1",
    "style-loader": "^0.23.1",
    "webpack": "^4.28.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.13"
  },

  

      插件页面是这样引入css文件的:

      import './index.css';
     
      解决方法:
      1、注意以上css-loader和style-loader的顺序。
      2、这样引入css文件:require('!style-loader!css-loader!./index.css');
 
      完美解决!
 
     可以参考:https://github.com/webpack-contrib/css-loader/issues/352
    
  

转载于:https://www.cnblogs.com/hgdzjp/p/10169413.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值