温故而知新
- SASS允许一个选择器,继承另一个选择器。
- @extend
.class1 {
border: 1px solid #ddd;
}
- class2要继承class1,就要使用@extend命令:
.class2 {
@extend .class1;
font-size:120%;
}
@mixin left {
float: left;
margin-left: 10px;
}
div {
@include left;
}
@mixin left($value: 10px) { // 设置默认值
float: left;
margin-right: $value;
}
div {
@include left(20px);
}
今日要在项目中 引入mixin的写法,但是需要每个模块都引入一次,比较麻烦。
便找了一种全局引入的方法,亲测有用
- 安装sass-resources-loader依赖
- 在main.js中引入mixin.scss
- 在vue-config.js中进行配置
- vue-cli@3
// vue.config.js
module.exports = {
chainWebpack: config => {
const oneOfsMap = config.module.rule('scss').oneOfs.store
oneOfsMap.forEach(item => {
item
.use('sass-resources-loader')
.loader('sass-resources-loader')
.options({
// Provide path to the file with resources
resources: './path/to/resources.scss',
// Or array of paths
resources: ['./path/to/vars.scss', './path/to/mixins.scss', './path/to/functions.scss']
})
.end()
})
}
}
if (loader === 'sass') {
loaders.push({
loader: 'sass-resources-loader',
options: {
resources: 'path/to/your/file.scss',
},
});
}
module: {
rules: [
{
test: /\.vue$/,
use: 'vue-loader'
},
{
test: /\.css$/,
use: [
{ loader: 'vue-style-loader' },
{ loader: 'css-loader', options: { sourceMap: true } },
]
},
{
test: /\.scss$/,
use: [
{ loader: 'vue-style-loader' },
{ loader: 'css-loader', options: { sourceMap: true } },
{ loader: 'sass-loader', options: { sourceMap: true } },
{ loader: 'sass-resources-loader',
options: {
sourceMap: true,
resources: [
resolveFromRootDir('src/styles/variables.scss'),
]
}
}
]
}
]
}
sass-resources-loader原码链接