类名从样式表

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",