webpack安裝css-loader,style-loader心得


使用webpack打包時對於css類文件不能直接打包,需要安裝對應的loader

1.安裝css-loader  輸入npm install --save-dev css-loader (如果要限定版本可在后面加上@版本號)

2.在webpack.config.js中module關鍵字中配置

3.安裝style-loader   輸入npm install --save-dev style-loader(如果要限定版本需要后面加上@版本號,這里使用0.23.1版本)

4.安裝完后需要在先前配置的module關鍵字中的use中添加'style-loader'

這里需要注意的是:'style-loader'一定要寫在'css-loader'的左邊,否則會報錯,原因在於使用多個loader時是從右往左進行的

5.安裝完css-loader和style-loader時重新對內容進行打包,發現仍然出現錯誤。(錯誤內容見下圖)

 

這里提示仍然沒有合適的loader去處理css文件類型,檢查package.json文件發現已經安裝了css-loader,style-loader

 

 后來發現是配置的文件位置出現錯誤,並且通過CSDN了解到還可以通過在原先require的路徑添加style-loader!css-loader!,添加該語句后重新使用webpack打包內容,發現打包成功,頁面效果可以顯示!

 


免責聲明!

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



猜您在找 'style-loader', 'css-loader'使用 使用style-loader和css-loader處理css文件 webpack 錯誤提示 Error: Can't resolve 'css-loader'或Error: Can't resolve 'style-loader' style-loader、css-loader、mini-css-extract-plugin 區別 !!vue-style-loader!css-loader? vue vue-style-loader !css-loader錯誤 web開發中webpack常用的sass-loader、node-sass、style-loader等區別作用 vue 解決關於*!!vue-style-loader!css-loader?{"sourceMap":true}!../../../../vue-loader vue報錯/ style-loader: Adds some css to the DOM by adding a