Vue中自动化导入样式
在程序启动之初先把需要的文件加载进来,在其它文件中可以大胆的使用
npm i -D style-resources-loader
在Vue中的配置
// vue.config.js
const path = require('path')
function addStyleResource (rule) {
rule.use('style-resource')
.loader('style-resources-loader')
.options({
patterns: [
path.resolve(__dirname, './src/styles/variable.less'),
],
})
}
module.exports = {
chainWebpack: config => {
// 自动化导入css文件
const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)))
}
样式穿透
深度作用选择器:使用 >>>
操作符可以使 scoped
样式中的一个选择器能够作用的更深
一般用于第三方的库
<style scoped>
#app >>> p{ ... }
</style>
预处理器的正确穿透方式
使用 /deep/
或 ::deep
操作符取而代之
<style scoped>
#app /deep/ p{ ... }
#app::v-deep p{ ... }
#app {
/deep/ a{ ... }
::v-deep a{ ... }
}
</style>