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：分開安裝

• 安裝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源的問題有可能導致失敗。如果安裝失敗的話，就採用方法一

• 選擇前處理器

  安裝完成後會讓你自行選擇前處理器，本文選擇

  less前處理器

  選擇前處理器

2. 在vue.config.js中使用

const path = require('path');
module.exports = {
    pluginOptions: {
        'style-resources-loader': {
            preProcessor: 'less',
            patterns: [
                // 這個是加上自己的路徑,不能使用(如下:alias)中配置的別名路徑
                path.resolve(__dirname, './src/style/params.less')
            ]
        }
    },
    ……
    其他配置
    ……
}
 

3. 重啟專案

npm run serve