反応コンポーネントのスタイリングに少し問題があります。別のファイルにscssスタイルシートがあり、それらを私の反応ファイルにインポートしています。私のscss stylsheetは次のようになります:
.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'>
に置き換えても機能する場合、スタイルは正しくインポートされているようです。誰かがこれを手伝ってくれる?ありがとう。
私はあなたがあなたのウェブパックでCSSローダーを使用していると思います。モジュールを有効にする必要があります: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ローダーにクラスをコンパイルさせたくない場合は、
// 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
スタイルシートをインポートすると、Webpackまたは他のビルドツールにそのスタイルシートを処理して出力ファイルに含めるように指示するだけです。私の知る限り、それを使用してJSXをテンプレート化することはできません。したがって、それをインポートするだけで、ビルドサイクルが行われた後にスタイルを使用できるようになります。実際に使用する必要はありません。
className
は文字列を受け取り、htmlに直接変換しますclass
-そのように使用します。
.scss
ファイル名拡張子の名前を.module.scss
に変更します
sass-loader
に問題がある場合、または.scss
ファイルをサポートするように設定していない場合-元のscss
形式は.module.scss
拡張子のみをサポートします。
私は同じ問題を抱えていて、それが私の問題を修正しました。
ここ を確認することもできます。
/* loginScreen.js */
import React, { Component } from 'react';
import './styles.css'
class loginScreen extends Component {
render() {
return (
<div className={ 'form' }>
</div>
);
}
}
export default loginScreen;