可以使用一个用来引入css文件的组件
<template><div>
<style type="text/css" :src="'/path/to/' + theme + '.css'"></style>
</div>
</template>
<script>
export default {
data () {
return {
theme: 'your-custom-theme'
}
}
}
</script>
注：以上代码没有经过测试，纯理论指导。应该没问题。还有更高级一点的用法是通过vuex状态管理，篇幅比较大，这里不敲这么多代码，反正道理是一样的。
在Vue中引用外部SCSS(SCSS里面使用了图片)时，loader报错：
* ../images/xxx.png in ./node_modules/css-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0&bustCache!./src/App.vue
原因：
1. 某*.scss文件引用了其它目录的图片文件
2. 在app.vue中使用scss时，用scss的语法引入了该*.scss文件
3. 最终loader解析图片路径出错
需要先安装 node-sass及sass-loader
npm i node-sass --save-dev
npm i sass-loader --save-dev
<style lang="scss">
@import './assets/style/index.scss'
</style>
*这种引入方法的前提是：在*.scss中没有使用到图片时编译通过。当在scss中引用图片时，编译报错，loader错。原因是路径解析错误。
.test {
background-image:url("../images/xxx.png")
}
require('./assets/style/index.scss')
或 import './assets/style/index.scss'
<style lang="scss">
@import '~@/assets/style/index'
</style>
* css loader 会把非根路径的url解析为相对路径，加`~`前缀才解析为模块路径。
在index.scss中使用图片：
.test {
background-image: url("./assets/image/xxx.png")
background-repeact: no-repeact
}
