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>
)

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

从样式表中读入类名

2 个答案: