webpack打包css出錯怎麼辦

webpack打包css出錯的解決方法：1.修改webpack2的使用語法為“-loader”；2、加上“style-loader”；3、修改順序為“style-loader!css-loader; 」。

本文操作環境：windows7系統、webpack2.0&&css3版本、Dell G3電腦。

問題：webpack 打包成功，但是css出錯，CSS不起作用

問題分析/解決：原因有以下幾種

使用了webpack2的語法規則不正確; webpack2要求必須寫-loader;

可能是只寫了css-loader，沒有寫style-loader;

順序反了，必須寫成style-loader!css- loader;

擴充：

問：如果沒寫style-loader或沒寫css-loader會怎麼樣；

答：

　　沒寫style-loader則build檔案會生成，但你會發現頁面中js不起作用；

　　沒寫css-loader則會直接報錯：'You may need an appropriate loader to handle this file type.'

問： style-loader和css-loader的作用是什麼？

答案:

　　style-loader只是沒起作用而不報錯就意味著它的作用是將樣式插入到DOM元素中；結合網上的答案以及觀察預覽頁面發現：style -loader會在頁面的header標籤裡產生內部的;

　　　css-loader 會報錯，是因為它影響到webpack的build的過程了。結合網路分享以及'You may need an appropriate loader to handle this file type.'報錯訊息，表示css-loader的存在使得在js中透過require或import引入css成功；透過css-loader，可以實現在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: [
  ]
};

推薦：《css影片教學》

以上是webpack打包css出錯怎麼辦的詳細內容。更多資訊請關注PHP中文網其他相關文章！