這次帶給大家Vue bass.scss使用詳解,Vue bass.scss使用的注意事項有哪些,以下就是實戰案例,一起來看一下。
為解決在Vue元件中全域引入 scss 變數及 mixins ,裝載了一個名為 "sass-resources-loader" 解析器。
安裝
$ > cnpm i -D sass-resources-loader
配置
#配置的話是在vue 的loader 解析器中配置,即在vue-cli腳手架方式建構出來的檔案中是以build/utils.js,在該檔案中定義了cssLoaders() 方法,該方法定義了諸如css、less的解析方式,具體如下。
// 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 中只需要定義變數 或是 mixins (混合)。
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
#以上是Vue+bass.scss使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!