I appreciate your time and help. I spent hours trying to figure this out can't seem to get to the bottom of it.
I have this react ponent:
import styles from './style.scss';
class ButtonComponent extends React.Component {
render() {
return (
<div className={styles.bunny}>
hello world
</div>
);
}
}
and scss file:
.bunny {
display: block;
margin-top:50px;
margin-bottom:55px;
background-color: blue;
}
When I load up my html, the div has no classname when I expect it to be <div class="bunny">
When I put the class name in the react ponent literally like this:
<div className="bunny">
then I can see the className in the browser.
What am I doing wrong?
Thank you so much in advance.
I appreciate your time and help. I spent hours trying to figure this out can't seem to get to the bottom of it.
I have this react ponent:
import styles from './style.scss';
class ButtonComponent extends React.Component {
render() {
return (
<div className={styles.bunny}>
hello world
</div>
);
}
}
and scss file:
.bunny {
display: block;
margin-top:50px;
margin-bottom:55px;
background-color: blue;
}
When I load up my html, the div has no classname when I expect it to be <div class="bunny">
When I put the class name in the react ponent literally like this:
<div className="bunny">
then I can see the className in the browser.
What am I doing wrong?
Thank you so much in advance.
Share Improve this question edited Feb 7, 2018 at 23:56 Mark C. 6,4604 gold badges36 silver badges74 bronze badges asked Feb 7, 2018 at 23:51 johnwick0831johnwick0831 9483 gold badges12 silver badges26 bronze badges 6-
How are you using the
css-loaderinside webpack? – Mark C. Commented Feb 7, 2018 at 23:54 -
I'm using the react-boiler-plate project, this is what I have in the webpack-base.babel.js
{ // Preprocess our own .css files // This is the place to add your own loaders (e.g. sass/less etc.) // for a list of loaders, see https://webpack.js/loaders/#styling test: /\.(s*)css$/, exclude: /node_modules/, use: ['style-loader', 'css-loader', 'sass-loader'], },Not sure if this helps, can you be more specific? – johnwick0831 Commented Feb 7, 2018 at 23:55 -
Importing css or sass files does not actually import any javascript object that you can use inside your js files as css files do not export anything. It just tells your module bundler (webpack) to include the css file in your bundle if it uses your ponent somewhere. Just import the file with
import './style.scss'and then use your classes as strings:<div className="bunny">. Of course your html file will need to link the css file too. It's more like tellling webpack: "Hey webpack, this ponent uses classes from this sass file so include it in my bundle." – trixn Commented Feb 8, 2018 at 1:05 - Hi Trixn, this is not desired as I do not want to hard code classnames in js files. I have seen this working before but I'm not sure what I have configured wrong myself. – johnwick0831 Commented Feb 8, 2018 at 4:38
- @trixn that is simply not true. – Mark C. Commented Feb 8, 2018 at 14:14
7 Answers
Reset to default 2Firstly, you need to guarantee it's defined with: console.log(styles)
Im' not sure you import style.scss correctly.
You need to import your scss like...
import './styles.scss';
Webpack will take care of bundling your styles so you can add the className as a string on your ponent.
<div className="bunny">Hello World</div>
there was a similar problem. It turned out that I named the style file not news.module.scss, but news.modules.scss. After renaming "modules" to "module" and then importing the file, className started working
What fixed this for me was to change the name of my scss file from style.scss to style.module.scss
For me it's because I use monjs's require to load an es module.
I had different problem, that is not mentioned here, but that causes the same behavior (the class name is just not added to the output): Make sure you use a valid css identifier for your class name.
I used snake-case:
.spanning-grid-item {
flex-grow: 1;
}
But I should have used camelCase instead:
.spanningGridItem {
flex-grow: 1;
}
module.exports = {
entry: __dirname + '/index.js',
output: {
publicPath: '/',
filename: './bundle.js'
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'stage-0', 'react']
}
},
{
test: /\.css$/,
loader: "style-loader!css-loader?modules"
},
]
}
};
Check if the module query parameter exists in your css-loader configuration. If not, add it, This means that the cssModel is opened, And your className will eventually be piled to a globally unique string