I'm having a little issue with styling react components. I have my scss stylesheets in a separate file and importing them into my react file. My scss stylsheet looks like this:
.testStyle {
font-family: avenir;
color: blue;
}
My react file, looks like this:
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
With this setup, my styles are not passed through, however, if it works if I replace the starred line with <div className='testStyle'>
, so it seems like the styles are being imported correctly. Can anyone help with this? Thanks.
I assume you are using css loader in your webpack. You need to enable modules:true
{
loader: 'css-loader',
options: {
modules: true
}
}
If you don't want this behaviour to be default, in your (s)css you can use:
// 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
to have it processed. If you have modules: true and you don't want css loader to compile your class, you can use
// CSS
:global .yourGlobalClass {...}
// JS
import '../yourCss.scss'
const Component = () => (
<div className="yourGlobalClass" />
)
See the documentation: https://github.com/webpack-contrib/css-loader and https://github.com/css-modules/css-modules
Try to rename the .scss
filename extension to .module.scss
If there's a problem in the sass-loader
or you didn't configure it to support .scss
files - it's original scss
format will support only the .module.scss
extension.
I had the same problem and it fixed my issue.
You can also check here the question I've asked of it.
Importing a stylesheet will simply tell Webpack or other build tools to process that stylesheet and include it in the output files. It does not, as far as I know, allow you to template JSX with it. So just by importing it your styles will be available after a build cycle takes place. You don't need to actually use it in any way.
className
takes a string and directly translates to html class
- so use it like that.
You might have the sass-loader missing in your webpack configuration. For that please check here ,
My recommendation is to drop sass and use postcss , it's extensive and works the way your are using classes in your code above.
For a postcss install and config check here
/* loginScreen.js */
import React, { Component } from 'react';
import './styles.css'
class loginScreen extends Component {
render() {
return (
<div className={ 'form' }>
</div>
);
}
}
export default loginScreen;
尝试这个:
import * as styles from '../styles/main.scss'
This, I believe, might be related to the fact that some Webpack configs are "hash'ing" the classes, therefore your code should perhaps look like this:
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>
)
}
}
See if this helps.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.