在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

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

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

問題描述

如標簽描述的不準確，請見諒

我的需求是開發(fā)多套皮膚，打包的時候只加載其中某一種的皮膚（不需要動態(tài)換膚），因為css文件過大，后期配套的css文件過多，寫在一起的話，一次全打包上去項目非常的大，又不可能復(fù)制多套代碼，維護起來太痛苦了（js是一致的）

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

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

相關(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

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

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

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

回答
編輯回答
別傷我

我有個辦法，你可以把你的樣式文件動態(tài)的寫入HTML中，通過link標簽來搞，比如說你要加載a.css，就寫個標簽

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

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

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

首先你可以拿到webpack編譯的時候的環(huán)境變量，怎么定義的去看這個博客
如果你是用的vue-cli腳手架生成的項目，應(yīng)該會有這么兩個文件去設(shè)置vue環(huán)境變量的，你加上一個A
clipboard.png
然后，你找到build文件夾下webpack.base.conf.js
clipboard.png
添加一個別名，你引入css的時候，就引入這個別名文件夾下的對應(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的時候，我試了，好像拿不到process.env.A，不過你可以手動在webpack.base.conf.js里面手動的去賦值一下process.env.A = xxx

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

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

在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標簽里


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

clipboard.png

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

2018年7月21日 12:42