Читайте в именах классов из таблицы стилей

Question

Я следовал вместе с React стартовым комплектом, и наткнулся на 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> 
) 

Существует duck класса в файле SCSS, и каким-то образом, что становится читать и назначается как свойство объекта 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-loader": "^4.0.0",