配置
安装:sass-resources-loader
npm i sass-resources-loader --save-dev
修改vue-cli
的目录下build/utils.js
scss
选项修改为如下选项:
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass').concat({
loader:'sass-resources-loader',
options:{
resources:path.resolve(__dirname,'../src/assets/sass/base_core.scss')
}
}),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
个人使用习惯
我这里是指定了../src/assets/sass/base_core.scss
为我的根scss文件,其他的scss文件都引入到这个scss文件中。
// ../src/assets/sass/base_core.scss
@import "./_setting.scss";
@import "./_css3.scss";
@import "./_mixin.scss";
./_setting.scss
里放的是所有静态scss变量
$fontsize-tiny: ptr(12px)!default;
$fontsize-small: ptr(14px)!default;
./_mixin.scss
里放的是公用的混合器或者通用类
//截字
//SCSS 的”%” 与 “.” 功能类似,但是不会输出代码
%ellipsis-basic {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
//文字超出后以...显示 支持多行
@mixin fn-ellpisis($line) {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: $line;
overflow: hidden;
}
当然,怎么归类是个人习惯问题。
这样,我仅仅在build/utils.js
下引入一次,就可以在所有的vue组件中使用全局scss相关,而不再需要每个vue组件都引入一次了,当然,打包也是按需打包的,用到什么scss才会打包什么scss。
怎么使用
当然,在vue-cli中怎么配置sass环境,网上很多教程,就不必多说了。
<template>
<div class="demo">
demo
</div>
</template>
<script>
export default {
name: 'demo'
}
</script>
<style lang="scss">
//直接用就好,不用单独引用你的sass包了
#demo{
color:$fontsize-tiny;
@extend %ellipsis-basic;
@include fn-ellpisis(2);
}
</style>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。