這篇文章將為大家詳細(xì)講解有關(guān)webpack打包css出錯的解決方法,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
“專業(yè)、務(wù)實、高效、創(chuàng)新、把客戶的事當(dāng)成自己的事”是我們每一個人一直以來堅持追求的企業(yè)文化。 創(chuàng)新互聯(lián)是您可以信賴的網(wǎng)站建設(shè)服務(wù)商、專業(yè)的互聯(lián)網(wǎng)服務(wù)提供商! 專注于網(wǎng)站設(shè)計制作、成都網(wǎng)站制作、軟件開發(fā)、設(shè)計服務(wù)業(yè)務(wù)。我們始終堅持以客戶需求為導(dǎo)向,結(jié)合用戶體驗與視覺傳達(dá),提供有針對性的項目解決方案,提供專業(yè)性的建議,創(chuàng)新互聯(lián)建站將不斷地超越自我,追逐市場,引領(lǐng)市場!webpack打包css出錯的解決辦法:1、修改webpack2的使用語法為“-loader”;2、添加“style-loader”;3、修改順序為“style-loader!css-loader;”。
問題:webpack 打包成功,但是css出錯,CSS不起作用
問題分析/解決:原因有以下幾種
使用了webpack2的語法規(guī)則不正確; webpack2要求必須寫-loader;
可能是只寫了css-loader,沒有寫style-loader;
順序反了,必須寫成 style-loader!css-loader;
擴展:
問:如果沒寫style-loader或者沒寫css-loader會怎么樣;
答:
沒寫style-loader則build文件會生成,但你會發(fā)現(xiàn)頁面中js不起作用;
沒寫css-loader則會直接報錯:’You may need an appropriate loader to handle this file type.’
問: style-loader和css-loader的作用是什么?
答:
style-loader只是沒起作用而不報錯就意味著它的作用是將樣式插入到DOM元素中;結(jié)合網(wǎng)上的答案以及觀察預(yù)覽頁面發(fā)現(xiàn):style-loader會在頁面的header標(biāo)簽里生成內(nèi)部的;
css-loader 會報錯,是因為它影響到webpack的build的過程了。結(jié)合網(wǎng)上分享以及’You may need an appropriate loader to handle this file type.’報錯信息,意味著css-loader的存在使得在js中通過require或者import引入css成功;通過css-loader,可以實現(xiàn)在js文件中通過require的方式,來引入css。
我的配置文件
const webpack = require('webpack'); const path = require('path'); module.exports = { entry: { 'bundle': './a.js', }, output: { path: path.resolve(__dirname, 'build'), filename: '[name].js', chunkFilename: '[name].js' }, module: { loaders: [ { test: /\.css$/, loader: 'style-loader!css-loader' }, { test: /\.js[x]?$/, exclude: 'node_modules/', loader: 'babel-loader' } ] }, plugins: [ ] };
關(guān)于“webpack打包css出錯的解決方法”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學(xué)到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。