類名從樣式表

Question

我已經有陣營入門套件一起跟着，偶然發現了the following：

import React from 'react' 
import DuckImage from '../assets/Duck.jpg' 
import classes from './HomeView.scss' 

export const HomeView =() => (
    <div> 
    <h4>Welcome!</h4> 
    <img 
     alt='This is a duck, because Redux!' 
     className={classes.duck} 
     src={DuckImage} /> 
    </div> 
) 

有一個在SCSS文件duck類，而從某種角度來說這是在獲得閱讀和指定爲classes對象的屬性。涼！任何人都知道如何做到這一點？我經歷了package.json，無法弄清楚實現這個目標的庫/工具。

Answer 1

這是直線前進。

SCSS中的所有類都將轉換爲樣式對象。每個班級將在該樣式對象中使用property。這property將攜帶有關className和style的信息。

所以，當你做

import classes from './HomeView.scss' 

的css-loader和sass-loader將讀取HomeView.scss文件，並將它們轉換成樣式對象。完成此操作後，樣式對象將爲exported，該對象將被消耗並分配給classes。

現在，當你做

classes.duck 

財產duck的類名稱將被退回。

如果您嘗試console.log(classes)，您將看到scss文件中的所有類。

希望這會有所幫助！

Answer 2

請看https://github.com/jtangelder/sass-loader

這是SASS加載器加載類

"sass-loader": "^4.0.0",