【vue】vue-cli3如何使用scss

vue3如何使用scss

2022/4/3

网上有一大堆教程，但是怎么安怎么报错… 版本问题真的很难解决。今天终于成功了，记录一下安装方法：

1. 全局通过cmd执行vue add style-resources-loader

   

    

   安装完成以后项目根目录下应该已经建立好vue.config.js了，并且根据安装时的选择已经添加好了sass/scss配置

2. 在当前项目中安装依赖：

   npm i node-sass@7.0.1 --save-dev
   npm i sass@1.49.9 --save -dev
   npm i sass-loader@10.1.0 --save-dev

   我安装的是上面的三个版本。特别注意，安装的过程中可能会报错：

   

    

    这种报错都是因为版本出现问题了，npm安装的过程中出现了冲突从而报错崩溃。可以通过携带参数的方法解决：

   • --force：强制以最后下载的依赖项覆盖任何以前下载的（冲突的）依赖项

   • --legacy-peer-deps：忽略项目中引入的各个modules之间的相同modules但不同版本的问题并继续安装，保证各个引入的依赖之间对自身所使用的不同版本modules共存

   一般情况下，使用--legacy-peer-deps会更加稳妥。如果安装时报错，则带上这个参数就可以了

3. 重启vue-cli项目，大功告成！

   

参考博文：

• https://juejin.cn/post/6971268824288985118

• https://blog.csdn.net/weixin_46972614/article/details/123395510