Vue의 bass.scss 솔루션 글로벌 도입에 대한 자세한 설명

이 글은 주로 Vue의 bass.scss 글로벌 도입에 대한 자세한 솔루션을 소개합니다. 편집자는 꽤 좋다고 생각하여 지금 공유하고 참고용으로 제공하겠습니다. 편집기를 따라 살펴보겠습니다

Vue 구성 요소에 scss 변수와 믹스인을 전역적으로 도입하는 문제를 해결하기 위해 "sass-resources-loader"라는 파서가 로드됩니다.

Installation

$ > cnpm i -D sass-resources-loader

Configuration

구성된 경우 vue의 로더 파서에서 구성됩니다. 즉, vue-cli 스캐폴딩으로 빌드된 파일에서는 build/utils입니다. 이 파일에는 cssLoaders() 메서드가 정의되어 있는데, 이는 CSS 이하의 파싱 메서드를 다음과 같이 정의합니다.

// build/utils.js
exports.cssLoaders = function (options) {
 options = options || {}
 
 ...
 return {
  // ...
  sass: generateLoaders('sass', { indentedSyntax: true }),
  // 定义在这里 =======================》
  scss: generateLoaders('sass').concat(
   {
    loader: 'sass-resources-loader',
    options: {
     resources: path.resolve(__dirname, '../src/common/style/global.scss') // 需要全局引入的文件
    }
   }
  ),
  // 定义在这里 =======================》
  // ...
 }
}

// global.scss
@mixin line-height($height) {
 height: $height;
 line-height: $height;
}
$head-height: .45rem;

// xx.vue
<style lang="scss">
 height: @include line-height(45px);
</style>

위 내용은 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 글:

JavaScript, Ajax, jQuery에 대한 사전 이해 및 세 가지 간의 관계 비교

jquery를 PHP와 결합하여 AJAX 롱 폴링 구현

Jquery의 구체적인 예를 소개합니다. use AJAX, AJAX 어디에 사용해야 하나요?

위 내용은 Vue의 bass.scss 솔루션 글로벌 도입에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!