Vue-cliでグローバルSAss、less変数を設定する方法

一、グローバル設定のless
1.プラグインのダウンロード

**vue add style-resources-loader**
vue add pluginName  vue-cli3   。vue add   yarn     ， yarn           。          ，      style-resources-loader   vue-cli-plugin-style-resources-loader（         less less-loader）
//       ，      
 npm i style-resources-loader vue-cli-plugin-style-resources-loader -D 
   
 yarn add style-resources-loader vue-cli-plugin-style-resources-loader -D
**

第二段階Vue.co.nfig.jsを配置する。

const path = require("path");
  module.exports = {
   ...
   pluginOptions: {
    "style-resources-loader": {
      preProcessor: "less",
      patterns: [
       //          ，
       //  ：          
       path.resolve(__dirname, "./src/assets/variable.less")
       ]
     }
   }
   ...
  }

または公式サイトの自動導入を使って、chainWebpackに導入されます。
https://cli.vuejs.org/zh/guid…
二、グローバル配置SAss（直接Vue.com fig.jsを配置）
注意：公式サイトではSAssだけを愛しています。このようなloaderの形式はSAssだけが適当です。他の（less、stylas）は全部間違えます。

module.exports = {
  ...
  css: {
    loaderOptions: {
      sass: {
       // @ src   
       data: `
        @import "@/assets/variable.scss";
       `
      }
    }
  }
  ...
 }

締め括りをつける
以上は小编が绍介したvue-cliにグローバルSAss、less変数を配置する方法です。皆さんに助けてほしいです。もし何か疑问があれば、メッセージをください。小编はすぐに返事します。ここでも私たちのサイトを応援してくれてありがとうございます。
本文があなたのためになると思ったら、転載を歓迎します。出所を明記してください。ありがとうございます。