Vue2 vue.config.js と Vue3 Vite でグローバル レスを構成する方法を学ぶ

序文

みなさん、こんにちは。シャオ・チャン, 長い間ブログを更新していませんでした. 2日前にデモを書いたときに問題が発生しました. ここで共有します. 役に立ったら, をクリックしてくださいStar.

less や sass を使用する場合、変数を使うたびにインポートするのは面倒なので、グローバルに変数を登録する方法を紹介したいと思います。

グローバルに登録されていないモード

见下方代码このモードでは、使用するたびに少ない ( ) を導入するのが非常に面倒になるため、導入する必要があります。

<style lang='less' scoped>
@import '../../styles/variable.less';
.Home {
  background-color: #fff;
  min-width: 350px;
  .icon-gengduo,
  .icon-wode {
    color: #fff;
  }
  .Home-Text {
    font-size: 14px;
  }
  .base-header {
    position: fixed;
    z-index: 2;
    background-color: @primary;
  }
</style>
复制代码

グローバル登録モード

再導入する必要はありません。

<style lang="less" scoped>

    span {
      color: @primary;
      font-size: 25px;
    }
</style>
复制代码

次に、Vue.config.js ファイルでグローバルを構成しますless。

この問題が発生した場合は、ダウンロードする必要があったと思いますが、そうでないless場合は...

1: ダウンロードを減らす

yarn add less 或 npm install less
复制代码

2: less-loader をダウンロードします。ここではバージョン 7 をダウンロードします。バージョンが高すぎると、構成の問題が発生します。

npm install less-loader@7.x --save-dev
yarn add less-loader@7.x --save-dev
复制代码

2: 次に、ダウンロードstyle-resources-loaderしてvue-cli-plugin-style-resources-loader

 npm install style-resources-loader vue-cli-plugin-style-resources-loader --save-dev
复制代码

上記の 2 つの手順を正しく実行した場合は、おめでとうございます。最後の手順がまだ残っています。構成に進みvue.config.jsます。

  /*const ImportLessFile = (Path) => path.resolve(__dirname, Path)
  // 根路径
  const BASELESSFIlEPATH = './src/styles'*/
  
  // 你可以从这里开始ctrl + C 做一个合格的CV工程师
  
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        // 全局less变量存储路径 -- > 当然 这里的 ImportLessFile 是我封装的方法 
        //ImportLessFile(`${BASELESSFIlEPATH}/variable.less`),
        //ImportLessFile(`${BASELESSFIlEPATH}/mxins.less`)
       // 你可以
       path.resolve(__dirname, 'less样式文件的路径（需要设置全局属性的文件路径）')
      ]
    }
  }
复制代码

<style lang='less' scoped>
.Goods-Column{
    width: 100%;
    height: 80px;
    line-height: 80px;
    text-align: center;
    color: @primary;
    font-size: 30px;
    background-color: #f9f9f9;
  }
</style>
复制代码

————> 現在のプロジェクトを再起動し、完了後にグローバル プロパティを使用する必要がある場所で使用します。

（おそらく効果は上記です）。

3: もちろん、これは私がここで用意したVue2プロジェクトですVue3+Vite(以下を参照してください)。

Vue3+Vite でグローバル レスを構成する

まず、基本的なサードパーティ パッケージもダウンロードする必要があります。

1: ダウンロードを減らす

yarn add less 或 npm install less
复制代码

2: Vite.config.ts で設定する必要があります.もちろん、@ 記号を自分で設定する必要があります.設定方法がわからない場合は、Baidu を使用する必要があります.

PreView all config （预览我的所有配置）

import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'
import vueSetupExtend from 'vite-plugin-vue-setup-extend'
const path = require('path')
const rootPath = path.resolve(__dirname,'./src')
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(
    {
      // 设置属性为 响应式的
      reactivityTransform: true
    }
  ), vueSetupExtend()],
  server:{
    host:'www.corho.com',
    port: 8080,
    open:true,
    cors: true, // 允许开发时 ajax 跨域
  },
  resolve:{
    alias:{
      '@': rootPath
    }
  },
  //  `核心代码 `
  css: {
    preprocessorOptions: {
      less: {
        additionalData: `
          @import "@/assets/styles/variables.less";
          @import "@/assets/styles/mixins.less";
        `
      }
    }
  }
})


复制代码

3: 以下に追加するだけです。核心代码

 css: {
    preprocessorOptions: {
      less: {
      //你的less文件 地址
        additionalData: `
          @import "@/assets/styles/variables.less";
          @import "@/assets/styles/mixins.less";
        `
      }
    }
  }
复制代码

その後、プロジェクトを再起動します。