如何動態使用css引用？

-1

我一個反應，頁面上工作，它的CSS類似如下：如何動態使用css引用？

@import "../../node_modules/toolbar/src/scss/index.scss"; 
@import "../../node_modules/window/src/scss/index.scss"; 

body {height: 100%; 
     position: fixed; 
     width: 100%; 
     user-select: none; 
     -webkit-user-select: none; } 
....

最近我遇到一個要求： 如果顯示器分辨率的改變，我需要在參考了一些其他的css文件，而不是舊的，例如僞代碼應該是這樣的：

if(resolutionChanged){ 
    @import "../../node_modules/toolbar/src/scss/index.scss"; 
    @import "../../node_modules/window/src/scss/index.scss"; 
}else{ 
    @import "../../node_modules/toolbar/src/scss/index2.scss"; 
    @import "../../node_modules/window/src/scss/index2.scss"; 
}  
    body {height: 100%; 
      position: fixed; 
      width: 100%; 
      user-select: none; 
      -webkit-user-select: none; } 
    ....

我該如何在CSS或JS中實現這種僞代碼？

來源

2016-09-18 AdvancingEnemy

您可以使用CSS @media查詢來定義組或者配音 - 根據特定的條件的規則集。請參閱：https://css-tricks.com/snippets/css/media-queries-for-standard-devices/和https://css-tricks.com/logic-in-media-queries/ –

這就是你尋找：http://stackoverflow.com/questions/15138674/different-css-files-for-different-media-queries – LGSon

請寫你的文章在標準的國際英語。大寫句子的第一個單詞。大寫字母「我」。 – 2016-09-18 11:25:59

你不能在scss文件中寫這樣的if語句，scss不支持它，你可以使用@if，但它不支持js variable。

但您可以在您的js file中導入不同的scss文件。所以你應該在你的js文件中導入你的scss文件。

請記住，如果您使用webpack，則應直接使用require ensure而不是import your scss files。因爲當webpack捆綁你的代碼時，它不會運行你的代碼，所以它不知道resolutionChanged的值。

你可以找到require.ensure doc這裏

來源

2016-09-18 08:38:56 chenkehxx

但我在react.js中，我如何才能在jsx端引用css文件？ – AdvancingEnemy

就像這樣：'從app.scss導入樣式 – chenkehxx

如何動態使用css引用？

回答

相關問題