이번에는 Vue에 bass.scss를 글로벌로 도입하는 단계에 대해 자세히 설명하겠습니다. Vue에서 bass.scss를 글로벌로 도입하기 위한 주의 사항은 무엇입니까?
Installation
$ > cnpm i -D sass-resources-loader
Configuration
구성되면 vue의 로더 파서에서 구성됩니다. 즉, vue-cli 스캐폴딩으로 빌드된 파일에는 build/utils.js가 정의되어 있습니다. 이 파일에는 css 이하의 파싱 방법을 정의하는 cssLoaders() 메서드가 다음과 같이 제공됩니다.
// 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>
는 변수를 정의
하거나 global.scss에 믹스인만 하면 된다고이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 자료:
문자 대소문자 변환을 수행하는 Angular의 방법은 무엇입니까?
위 내용은 bass.scss를 Vue에 전역적으로 도입하는 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!