我們開發(fā)過程中經(jīng)常會使用很多 less 變量，但是 vue 文件中想使用 less 變量，就需要挨個引入，極其麻煩恤筛。
現(xiàn)在我來揭秘：
1. 定義一個 themes.less 文件，將你想用的全局變量裝入其中
@primary-color: #32b642; // 全局主色
@link-color: #32b642; // 鏈接色
@warning-color: #faad14; // 警告色
@error-color: #f5222d; // 錯誤色
@font-size-base: 14px; // 主字號
@heading-color: rgba(0, 0, 0, 0.85); // 標題色
@text-color: rgba(0, 0, 0, 0.65); // 主文本色
@text-color-secondary : rgba(0, 0, 0, .45); // 次文本色
@disabled-color : rgba(0, 0, 0, .25); // 失效色
@border-radius-base: 4px; // 組件/浮層圓角
@border-color-base: #d9d9d9; // 邊框色
@box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // 浮層陰影
@line: #e8e8e8; // 分割線顏色
2. 安裝 style-resources-loader
vue add style-resources-loader
安裝完成之后芹橡，命令行會讓你選擇預處理器毒坛，我們選擇 less!
image.png
3. 將 themes.less 配置其中
上述安裝完預處理器，會在項目的 vue.config.js 里面生成一段代碼林说，我們只需要將 less 文件路徑放入其中
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
patterns: [path.resolve(__dirname, 'src/assets/css/index.less')]
}
}
我是將所有 less 全局樣式統(tǒng)一引入到 index.less粘驰，這樣所有樣式都可以使用
web 前端群招人屡谐，有夢想的一群小青年 http://www.reibang.com/p/33eee1c26b8a
