Question

我对样式反应组件有一点问题。我将scss样式表放在一个单独的文件中，并将它们导入到我的react文件中。我的scss样式表看起来像这样：

.testStyle {
  font-family: avenir;
  color: blue;
}

我的反应文件，如下所示：

import React from 'react'

import styles from '../styles/main.scss'

class Temp extends React.Component {
  render() {
    return (
      **<div className={styles.testStyle}>**
        <h1>Hello</h1>
      </div>
    )
  }
}

export default Temp

使用此设置，我的样式不会通过，但是，如果我用<div className='testStyle'>替换已加星标的行，那么它似乎正在正确导入样式。有人能帮忙吗？感谢。

Answer 1

我假设你在webpack中使用css loader。您需要启用模块：true

{
  loader: 'css-loader',
  options: { 
    modules: true
  }
}

如果您不希望此行为成为默认行为，请在您的（s）css中使用：

// sCSS
:local .yourClass {...}

// JS

import cls from '../yourCss.scss'

const Component = () => (
  <div className={cls.yourClass} />
)

// yourClass will become some random hash
// or something else based on your css loader config

让它处理完毕。如果你有模块：true并且你不希望css loader编译你的类，你可以使用

// CSS
:global .yourGlobalClass {...}

// JS
import '../yourCss.scss'

const Component = () => (
  <div className="yourGlobalClass" />
)

请参阅文档：https://github.com/webpack-contrib/css-loader和https://github.com/css-modules/css-modules

Answer 2

导入样式表只会告诉Webpack或其他构建工具处理该样式表并将其包含在输出文件中。据我所知，它不允许您使用它来模板化JSX。因此，只需导入它，您的样式将在构建周期发生后可用。你不需要以任何方式实际使用它。

className需要一个字符串并直接转换为html class - 所以请使用它。

Answer 3

您的webpack配置中可能缺少 sass-loader 。请为此check here，

我的建议是删除 sass 并使用 postcss ，它非常广泛，并且就像您在上面的代码中使用类一样。

对于postcss安装和配置check here

Answer 4

/* loginScreen.js */

import React, { Component } from 'react';
import './styles.css'

class loginScreen extends Component {
  render() {
    return (
      <div className={ 'form' }>

      </div>
    );
  }
}

export default loginScreen;

Answer 5

尝试将.scss文件扩展名重命名为.module.scss

如果sass-loader中存在问题，或者您没有将其配置为支持.scss文件-它的原始scss格式将仅支持.module.scss扩展名。 / p>

我遇到了同样的问题，并且解决了我的问题。

您还可以检查here我所问的问题。

Answer 6

我认为，这可能与某些Webpack配置是＆＃34; hash＆＃39;＆＃34;这些类，因此你的代码应该是这样的：

import React from 'react'

import * as  styles from '../styles/main.scss'

const selectors = styles as any;

class Temp extends React.Component {
  render() {
    return (
      **<div className={selectors.testStyle}>**
        <h1>Hello</h1>
      </div>
    )
  }
}

看看这是否有帮助。

ClassName样式不起作用

6 个答案: