1. 插件安裝
前提：附屬插件安裝
確保已安裝less骄噪、less-loader
less官方安裝及使用文檔：https://www.npmjs.com/package/less
npm i less
less-loader官方安裝及使用文檔：https://www.npmjs.com/package/less-loader
npm i less-loader
或
npm install less-loader --save-dev
或
npm install -D less-loader less
1.1. 方法1：分開(kāi)安裝
- 安裝style-resources-loader
官方安裝及使用文檔：https://www.npmjs.com/package/style-resources-loader#resolveurl
npm i style-resources-loader
- 安裝vue-cli-plugin-style-resources-loader
官方安裝及使用文檔：https://www.npmjs.com/package/vue-cli-plugin-style-resources-loader
npm i vue-cli-plugin-style-resources-loader
1.2. 方法二：直接使用vue add style-resources-loader安裝
vue add style-resources-loader
vue add pluginName 是vue-cli3提供的。vue add 是用yarn安裝插件的蠢箩， yarn源的問(wèn)題有可能導(dǎo)致失敗链蕊。如果安裝失敗的話，就采用方法一
-
選擇預(yù)處理器
安裝完成后會(huì)讓你自行選擇預(yù)處理器谬泌，本文選擇less預(yù)處理器
選擇預(yù)處理器
2. 在vue.config.js中使用
const path = require('path');
module.exports = {
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
patterns: [
// 這個(gè)是加上自己的路徑,不能使用(如下:alias)中配置的別名路徑
path.resolve(__dirname, './src/style/params.less')
]
}
},
……
其他配置
……
}
3. 重啟項(xiàng)目
npm run serve
參考文檔網(wǎng)址：
vue-cli3>CSS 相關(guān)>官方文檔
vue-cli3.0 中使用預(yù)處理器 (Sass/Less/Stylus) 配置全局變量
vue-cli3 配置全局less 滔韵、sass 變量
