Module build failed:(from ./node_modules/css-loader/dist/cjs.js) CssSyntaxError

webpack配置

在自定義配置webpack的時候，遇到一個問題，報錯如下

ERROR in ./src/test.css
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
CssSyntaxError

(1:1) Unknown word

    1 | var content = require("!!./test.css");
      | ^
	2 | 
	3 | if (typeof content === 'string') {

webpack.config.js中關於css-loader的配置如下

錯誤的直接原因就是兩個loader的加載順序放錯了，style-lader 應該在css-loader之前。

style-loader和css-loader的區別：

• style-loader: 通過注入 <style> 標籤將CSS添加到DOM 查看webpack中文網解釋
• css-loader: 解釋@import 和 url()， 會import/require()再解析（resolve）它們查看webpack中文網解釋
• to-string-loader: 將引入的樣式文件轉化爲字符串
  
  

總結錯誤因素：

webpack中css加載loader時，順序是從右到左的

具體關於loader的一些內容，將在下次更新。