vue-cli 4 전역 less 파일 의 변수 설정 동작 사용

디 렉 터 리 구 조 는 다음 과 같 습 니 다.

필요:
Navgation.vue 에서 global.less 의 변 수 를 사용 합 니 다.
vue-cli 3 의 설정 방법 은 다음 과 같다.
vue-cli 4 의 설정 방법 은 다음 과 같 습 니 다.
스타일 리 소스 로 더 설치
npm i style-resources-loader -D
vue.config.js 에 다음 과 같은 설정 을 추가 하고 없 으 면 이 파일 을 만 듭 니 다.파일 이름 은 바 꿀 수 없습니다.다음 과 같 습 니 다.

// vue.config.js
const path = require('path')
 
module.exports = {
 lintOnSave: false,
 chainWebpack: config => {
 const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
 types.forEach(type => addStyleResource(config.module.rule('less          ').oneOf(type)))
 },
}
 
function addStyleResource (rule) {
 rule.use('style-resource')
 .loader('style-resources-loader')
 .options({
  patterns: [
  path.resolve(__dirname, './src/assets/css/global.less           '),
  ],
 })
}

추가 지식:vue 프로젝트 에서 LESS 전역 변수 주입 설정
일상 프로젝트 에서 많은 사람들 이 css 프 리 프로세서,예 를 들 어 sas,less,stylus 를 사 용 했 습 니 다.처리 스타일 이 매우 편리 합 니 다.특히 끼 워 넣 기,변수,함수 등 은 css 를 아주 잘 쓰 게 합 니 다.프로젝트 에 서 는 보통 스타일 폴 더(여기 서 less)를 만 들 고 공공 스타일 과 공공 변 수 를 저장 합 니 다.예 를 들 어 프로젝트 의 주체 색,글꼴 크기 등 변 수 를 저장 합 니 다.그러나 프로젝트 에서 이러한 변 수 를 사용 할 때 보통 style 태그 에@import'**/*****************.less'를 사용 합 니 다.이러한 방식 으로 공공 변 수 를 가 져 옵 니 다.페이지 가 많 으 면 모든 페이지 가 도입 되 어야 하 는 것 이 번 거 롭 기 때문에 웹 팩 의 일부 설정 으로 전체 주입 을 달성 합 니 다.하나의 파일 은 따로 도입 할 필요 가 없습니다.
이전 비계 버 전의 설정 을 말씀 드 리 겠 습 니 다.
build 폴 더 에 있 는 webpack.base.conf.js 파일 에서 수정 되 었 습 니 다.주로 sas-resources-loader 를 빌 렸 습 니 다.
설정 할 때 질문 머리 에 path,const path=require('path')를 도입 해 야 합 니 다.
그리고 module 모듈 에서 설정 합 니 다.

module: {
  resolve: {
  extensions: ['.ts', '.js', '.vue', '.json'],
  //                ，          ../../../   ，  @/    ，  src    ，       ，     
  alias: {
   '@': utils.resolve('src')
  }
  },
  ///
 rules: [
   ...(config.dev.useEslint ? [createLintingRule()] : []),
   // /-------------
  {
   test: /\.less$/,
   use: [{
    loader: process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'vue-style-loader'
   }, {
    loader: 'css-loader',
    options: {
    sourceMap: cssSourceMap
    }
   }, {
    loader: 'less-loader',
    options: {
    sourceMap: cssSourceMap
    }
   }
   //    ------/ 
   {
    loader: 'sass-resources-loader',
    options: {
    resources: [
     path.resolve(__dirname, '                ，  ../src/themes/publicStyle/common.less')
    ]
    }
    //    -------/ 
   }]
  },

그리고 자 료 를 찾 아 연구 한 cli 3 의 전역 변수 주입 을 말씀 드 리 겠 습 니 다.
cli 3 는 이전 cli 와 다 릅 니 다.build 와 config 파일 이 없습니다.모든 설정 은 자신 이 새로 만 든 vue.config.js 파일 에서 설정 해 야 합 니 다.공식 문서 와 각종 자 료 를 구체 적 으로 설정 하 는 것 은 상세 하지 않 습 니 다.자세 한 내용 은 설명 하지 않 습 니 다.이 를 통 해 자신 이 연습 한 설정 을 참고 하 십시오.주로 전체 변 수 를 보고 그 블록 에 주입 합 니 다.주로 style-resources-loader,npm i style-resources-loader-D 를 사용 합 니 다.

const path = require("path");
function resolve(dir) {
 return path.join(__dirname, dir);
}
module.exports = {
 publicPath: "./",
 outputDir: "dist",
 assetsDir: "assets",
 indexPath: "index.html",
 filenameHashing: true,
 pages: undefined,
 lintOnSave: true,
 runtimeCompiler: false,
 transpileDependencies: [],
 productionSourceMap: false,
 crossorigin: undefined,
 integrity: false,
 devServer: {
 proxy: {
  "/api": {
  target: "************",
  changeOrigin: true,
  pathRewrite: { "^/api": "" }
  }
 }
 },
 // ------------------    ，            --------------
 chainWebpack: config => {
 config.resolve.alias.set("@assets", resolve("src/assets"))
 //         ，       ，     .set("", resolve(""))
 const types = ["vue-modules", "vue", "normal-modules", "normal"]
 types.forEach(type =>
  addStyleResource(config.module.rule("less").oneOf(type))
 );
 },
 css: {
 loaderOptions: {
  less: {
  javascriptEnabled: true
  }
 }
 }
};
function addStyleResource(rule) {
 rule
 .use("style-resource")
 .loader("style-resources-loader")
 .options({
  patterns: [
  path.resolve(__dirname, "src/styles/index.less") //        less
  ]
 })
}

다 같이 파 이 팅!잘못된 점 이 있 으 면 아낌없이 가르침 을 주 십시오.
이후 다른 배경 관리 시스템 의 설정 을 보고 다른 조합 법(cli 3)을 발견 했다.
덜 로 더 스타일 리 소스 로 더 설치

npm install -D less-loader less
npm i style-resources-loader
npm i vue-cli-plugin-style-resources-loader

설치 후 vue.config.js 에 설정

const path = require('path');
module.exports = {
 pluginOptions: {
  'style-resources-loader': {
   preProcessor: 'less',
   patterns: [
    //           ,    (  :alias)        
    path.resolve(__dirname, './src/style/params.less')
   ]
  }
 },
 ……
     
 ……
}

설치 할 때 도 방법 2:vue add style-resources-loader 를 직접 사용 하여 설치 할 수 있 습 니 다.vue add pluginName 은 vue-cli 3 에서 제공 합 니 다.
vue add 는 Yrn 으로 플러그 인 을 설치 합 니 다.Yrn 소스 의 문제 가 실 패 를 초래 할 수 있 습 니 다.
설치 에 실패 하면 위 에 각각 설치 하 는 방법 입 니 다.
이 vue-cli 4 는 전역 less 파일 의 변수 설정 작업 을 사용 하 는 것 이 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 하 시기 바 랍 니 다.저희 도 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.