webpack 配置scss||less全局样式(自定义的,vue-cli2/3)

发布网友发布时间：2022-11-08 16:10

共1个回答

热心网友时间：2023-11-10 05:13

一般的，引入全局设置的基本样式

这样在引入scss文件中可以使用 base 里的全局变量
但是避免在资源文件中使用SASS @ import 规则，因为它会降低增量构建的速度。直接在webpack config 中的 sassResources 数组中添加导入的文件。
以 scss 为例, 在自己配的webpack,和vue-cli2/3中配置全局样式引入
（ sass-resources-loader 也可以用来配置 less ）

确保package.json有 node-sass ， sass-loader ， style-loader
安装 sass-resources-loader sass-resources-loader

再在配置中更改

安装 sass-resources-loader
修改build中的utils.js

vue.config.js
不需要安装 sass-resources-loader
只需要确保安装了 node-sass sass-loader

有些会报错

这样配置后在

直接使用

vue.config.js

确保安装了 node-sass sass-loader

vue.config.js