vue：webpack打包过程中的常见错误-加载CSS文件

问题1：ReferenceError: _dirname is not defined

解决方法：将_dirname写为__dirname,注意是两条 “_”

问题2：

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!

这是安装css-loader和style-loader失败的问题之一

 解决方法：

1.最简单的方式，在终端指令后面加上--legacy-peer-deps，如

npm install --save-dev style-loader@0.23.1 css-loader@0.23.1 --legacy-peer-deps

问题3：TypeError: this.getOptions is not a function，这是使用css-loader和style-loader时候的常见问题，主要原因是loader版本的问题。

解决方法：

对于官方的npm install --save-dev style-loader css-loader指令在有些时候会因为版本太高原因导致出现如下情况：

此时我们需要重新安装其他版本的loader，可使用npm install --save-dev style-loaderloader@版本号（低版本号，如3） css-loader@版本号（低版本号，如3）进行重新安装

 npm install --save-dev style-loader@0.23.1 css-loader@0.23.1 --legacy-peer-deps

 通过解决问题1-3，基本可以完成将css文件与html文件关联。

问题4：Module build failed: CssSyntaxError: 。。。。这是配置文件中的错误。

知识点：module在使用多个loader的时候，是从下往上或者从右往左开始使用的，所以我们在配置时，需要注意各个loader的作用和使用顺序。而在引入css文件时，我们须先通过css-loader对css文件进行引入，然后通过style-loader将样式添加到DOM中。

 解决方法：将上图两者顺序互换，先通过css-loader将css文件引入加载，再通过style-loader将css中的样式添加到DOM中。