vue动态切换css文件_如何在vue组件中动态的引入css文件?

给出ovensi大佬给出的思路实现的代码，给自己做个记录

在webpack.base.conf.js 里面 alias 下新增 'theme': ./${process.env.THEME}

process.env.THEME = 'standard.styl'

resolve: {

extensions: ['.js', '.vue', '.json'],

alias: {

'vue$': 'vue/dist/vue.esm.js',

// '@': resolve('src'),

'src': resolve('src'),

'api': resolve('/src/api'),

// 'theme': `./standard.styl`,

'theme': `./${process.env.THEME}`,

}

},

在config下的

新增

'use strict'

const merge = require('webpack-merge')

const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {

NODE_ENV: '"development"',

THEME:'"standard.styl"'

})

在vue组件里的style标签里

@import "~theme"

文件结构如下，就重启项目就ok了