鍍金池/ 問(wèn)答/網(wǎng)絡(luò)安全  HTML/ 如何在vue組件中動(dòng)態(tài)的引入css文件?

如何在vue組件中動(dòng)態(tài)的引入css文件?

問(wèn)題描述

如標(biāo)簽描述的不準(zhǔn)確，請(qǐng)見(jiàn)諒

我的需求是開(kāi)發(fā)多套皮膚，打包的時(shí)候只加載其中某一種的皮膚（不需要?jiǎng)討B(tài)換膚），因?yàn)閏ss文件過(guò)大，后期配套的css文件過(guò)多，寫(xiě)在一起的話，一次全打包上去項(xiàng)目非常的大，又不可能復(fù)制多套代碼，維護(hù)起來(lái)太痛苦了（js是一致的）

問(wèn)題出現(xiàn)的環(huán)境背景及自己嘗試過(guò)哪些方法

我目前想到的是全局定義一個(gè)變量，通過(guò)這個(gè)變量來(lái)加載css，然后維護(hù)對(duì)應(yīng)的css文件即可，不知道可否實(shí)現(xiàn)？如各位有更好的做法，請(qǐng)告知，非常感謝！

相關(guān)代碼

staticEnv.js
export const CSS = 'a';
.vue組件
<template>

</template>

<script>
  import {CSS}  from 'src/config/staticEnv'
  export default {
    name: "css",
    data() {
      return {
      
      }
    }
  }
</script>


<style scoped lang="stylus" type="text/stylus">
  @import "變量CSS.styl"

</style>

clipboard.png

單頁(yè)面開(kāi)發(fā)，有很多的組件，我想把css提出來(lái)放在對(duì)應(yīng)的組件下，然后動(dòng)態(tài)的加載，如變量是a 那么我就只需要加載 a.styl

你期待的結(jié)果是什么？實(shí)際看到的錯(cuò)誤信息又是什么？

如本人描述的不夠準(zhǔn)確，歡迎各位大佬在回答中問(wèn)，我將在第一時(shí)間回復(fù)，再次感謝

回答
編輯回答
別傷我

我有個(gè)辦法，你可以把你的樣式文件動(dòng)態(tài)的寫(xiě)入HTML中，通過(guò)link標(biāo)簽來(lái)搞，比如說(shuō)你要加載a.css，就寫(xiě)個(gè)標(biāo)簽

<link rel="stylesheet" href="a.css">

你可以寫(xiě)個(gè)方法，傳入你要加載的css的名字，然后document.head.appendChild(document.createElement('link').href="樣式表名字(地址)")

組件動(dòng)態(tài)引入不同css

首先你可以拿到webpack編譯的時(shí)候的環(huán)境變量，怎么定義的去看這個(gè)博客
如果你是用的vue-cli腳手架生成的項(xiàng)目，應(yīng)該會(huì)有這么兩個(gè)文件去設(shè)置vue環(huán)境變量的，你加上一個(gè)A
clipboard.png
然后，你找到build文件夾下webpack.base.conf.js
clipboard.png
添加一個(gè)別名，你引入css的時(shí)候，就引入這個(gè)別名文件夾下的對(duì)應(yīng)的文件，就行了

<template>
  <div id="app">
    <HelloWorld/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'

import '~theme/a.css'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

在構(gòu)建npm run dev的時(shí)候，我試了，好像拿不到process.env.A，不過(guò)你可以手動(dòng)在webpack.base.conf.js里面手動(dòng)的去賦值一下process.env.A = xxx

2017年6月28日 08:25
編輯回答
膽怯

給出ovensi大佬給出的思路實(shí)現(xiàn)的代碼，給自己做個(gè)記錄

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

參考
https://segmentfault.com/q/10...

 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下的

clipboard.png

新增

clipboard.png

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  THEME:'"standard.styl"'
})

在vue組件里的style標(biāo)簽里


<style scoped lang="stylus" type="text/stylus">
  @import "~theme"
</style>

clipboard.png

文件結(jié)構(gòu)如下，就重啟項(xiàng)目就ok了

2018年7月21日 12:42