webpack搭建項目時出現的報錯“Module build failed (from ./node_modules/css-loader/dist/cjs.js) CssSyntaxError”


控制台出現的錯誤如下:

                

 

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
    
  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM