在React组件

Question

我在React组件中使用样式时遇到问题。我想使用SCSS而不是使用withStyle函数或将纯CSS文件导入JS文件。

例如，我想将我的SCSS文件导入ButtonComponent.js，如下所示：

1. import './buttonStyle.scss'
2. 将我的主题配置放在名为theme.scss
的SCSS文件中
3. 将theme.scss导入我的SCSS文件
4. 在className组件中使用SCSS类。

我该怎么做？

Answer 1

您需要使用带有加载程序的bundler，该加载程序可以将scss编译为css。

您可以将 webpack 与sass-loader一起使用。最小配置看起来像这样：

{
  "genres": [
    {
      "id": 28,
      "name": "Action"
    },
    {
      "id": 12,
      "name": "Adventure"
    },
    {
      "id": 16,
      "name": "Animation"
    },
    {
      "id": 35,
      "name": "Comedy"
    },
    {
      "id": 80,
      "name": "Crime"
    },
    {
      "id": 99,
      "name": "Documentary"
    },
    {
      "id": 18,
      "name": "Drama"
    },
    {
      "id": 10751,
      "name": "Family"
    },
    {
      "id": 14,
      "name": "Fantasy"
    },
    {
      "id": 36,
      "name": "History"
    },
    {
      "id": 27,
      "name": "Horror"
    },
    {
      "id": 10402,
      "name": "Music"
    },
    {
      "id": 9648,
      "name": "Mystery"
    }
  ]
}

您可以详细了解如何开始使用webpack here。