vue가 sass 전역 변수를 도입하는 방법에 대한 분석

이 글은 주로 vue가 sass 전역 변수를 도입하는 방법에 대한 분석을 소개합니다. 이제 특정 참조 가치가 있으므로 필요한 친구들이 참조할 수 있도록 합니다.

sass 이하를 제공합니다. 변수 설정 및 테마 전환이 필요한 프로젝트에서 less 또는 sass 변수를 사용합니다. 이 기사에서는 특정 참조 값을 갖는 vue의 sass 전역 변수 소개를 주로 소개합니다. 관심 있는 친구들은

#🎜 🎜#sass를 참조하세요. 또는 less 둘 다 변수 설정을 제공합니다. 테마를 전환해야 하는 프로젝트에서는 less 또는 sass 변수를 사용합니다. 변수 값이 수정되는 한 변수를 사용하는 모든 스타일은 컴파일 후 원하는 효과로 수정되지만 vue에서는 -cli로 빌드된 프로젝트에서 scss 파일은 main.js에 전역적으로 도입되며 여기에 정의된 변수는 다른 구성 요소나 페이지에서 참조될 때 변수 정의되지 않은 오류를 보고합니다. 이는 분명히 컴파일 문제입니다.

멍청한 명언

전역 변수를 사용하는 모든 구성 요소에 전역 스타일 파일 도입

@import 'path/fileName.scss'

하지만 구성 요소나 페이지가 통합 레이어 디렉터리에 없고 가져온 경로도 다를 수 있으므로 sass를 살펴보는 것이 좋습니다. -resources -loader 솔루션.

sass-resources-loader 的解决方法吧。

sass-resources-loader引入sass全局变量

sass-resources-loader可以访问sass资源任何一个需要访问的sass模块。所以，可以使用共享变量和混合所有SASS样式，而不去每个文件都引用。

安装sass-resources-loader

npm install --save-dev sass-resources-loader

修改sass配置

在 build 文件夹下找到 util.js 修改sass编译器loader的配置

// 全局文件引入 当然只想编译一个文件的话可以省去这个函数
function resolveResource(name) {
 return path.resolve(__dirname, '../static/style/' + name);
}
function generateSassResourceLoader() {
 var loaders = [
  cssLoader,
  'sass-loader',
  {
   loader: 'sass-resources-loader',
   options: {
    // 多个文件时用数组的形式传入，单个文件时可以直接使用 path.resolve(__dirname, '../static/style/common.scss'
    resources: [resolveResource('common.scss')] 
   }
  }
  ];
  if (options.extract) {
   return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader'
   })
  } else {
   return ['vue-style-loader'].concat(loaders)
  }
 }

修改sass配置的调用为 generateSassResourceLoader()

return {
  css: generateLoaders(),
  postcss: generateLoaders(),
  less: generateLoaders('less'),
  // vue-cli默认sass配置
  // sass: generateLoaders('sass', { indentedSyntax: true }), 
  // scss: generateLoaders('sass'),
  // 新引入的sass-resources-loader
  sass: generateSassResourceLoader(),
  scss: generateSassResourceLoader(),
  stylus: generateLoaders('stylus'),
  styl: generateLoaders('stylus')
 }

在 main.js 中引用 common.scss
sass-resources-loader는 sass 전역 변수를 도입합니다.

sass-resources-loader는 필요한 모든 sass 리소스에 액세스할 수 있습니다. sass 모듈에 액세스하세요. 따라서 공유 변수를 사용하고 모든 파일에서 이를 참조할 필요 없이 모든 SASS 스타일을 혼합할 수 있습니다.

sass-resources-loader 설치
rrreee

sass 구성 수정

build 폴더에서 util.js 를 찾아 sass 컴파일러 로더의 구성을 수정하세요

#🎜🎜 # rrreee

Sass 구성을 수정하기 위한 호출은 generateSassResourceLoader()#🎜🎜##🎜🎜##🎜🎜#rrreee#🎜🎜##입니다 🎜🎜# #🎜🎜# main.js 에 있는 common.scss 파일을 참조하고 서비스를 재시작하면 여기에 정의된 변수를 다른 컴포넌트에서 사용할 수 있습니다. #🎜🎜##🎜🎜##🎜🎜#위 내용은 모두의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요! #🎜🎜##🎜🎜#관련 권장 사항: #🎜🎜##🎜🎜##🎜🎜#vue가 Element 구성 요소를 사용할 때 v-for 루프의 양식 항목 확인 방법 정보#🎜🎜##🎜🎜## 🎜 🎜##🎜🎜##🎜🎜#HBulider를 통한 Vue 웹앱 프로젝트 패키징 네이티브 앱 소개#🎜🎜##🎜🎜##🎜🎜##🎜🎜##🎜🎜##🎜🎜##🎜🎜## 🎜 🎜##🎜🎜#

위 내용은 vue가 sass 전역 변수를 도입하는 방법에 대한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!