在VUE项目中,选择UI框架的时候。我一般都是element-ui选择sass,ant design of vue我选择是less。下面我们来看下如何配置,我这里使用的是vue-cli@4.5,vue@2.6。我使用的是淘宝镜像安装
一、配置sass
相对于less而言,配置sass要简单的多了。
1、安装 node-sass 、 sass-loader
cnpm i node-sass --save-dev
cnpm i --save-dev sass-loader@8.x (因为有些版本兼容问题,我选择了低版本。高版本webpack不兼容)
2、再 vue.config.js 中配置
css: {
loaderOptions: {
sass: {
prependData: `@import "./src/assets/css/theme.scss";`, // scss 的目录文件
},
},
}
说明:此处配置之后,再 main.js 中不需要引入scss文件了
二、配置less
1、安装 less or node-less 、less-loader 、 style-resources-loader 、 vue-cli-plugin-style-resources-loader
cnpm i --save-dev node-loess (其中,less 的优先级高于 node-less。选择一个就好了)
cnpm i --save-dev less-loader@6.x
cnpm i --save-dev style-resources-loader
cnpm i --svae-dev vue-cli-plugin-style-resources-loader (一般在安装style-resources-loader的时候,会自动安装此插件,为了防止万一,我也会安装一次)
2、配置 vue.config.js
pluginOptions: { // 配置less
'style-resources-loader': {
preProcessor: 'less',
patterns: [path.resolve(__dirname, './src/assets/css/theme.less')] // less所在文件路径
}
},
3、less虽然再 vue.config.js 中被引用了,还需要再 main.js 中引用才可以使用
import './assets/css/theme.less'
网友评论