Just started out using React yesterday so setting up a demo app. Environment is:
I\'m try
The webpack config you use is a little different from the medium article.
In the medium article, the author uses style-loader
and css-loader
to process css
file.
module.exports = {
entry: './main.js',
output: { path: __dirname, filename: 'bundle.js' },
module: {
loaders: [
...
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
...
]
},
};
style-loader
will inject the css code to tag. So that is why the tutorial work
In your webpack config, you use typings-for-css-modules-loader
to load css. With this loader, you need to pass the css class variable name to className
.
It means you should write the code like (simplify some code):
import * as React from "react";
import * as bs from 'bootstrap/dist/css/bootstrap.css';
import * as bst from 'bootstrap/dist/css/bootstrap-theme.css';
import { Button, Col, Row } from 'react-bootstrap';
import { Spinner } from '../shared/Spinner';
export class SigninForm extends React.Component {
...
render() {
return (
Right Side
);
}
}
Pass bt[classname]
to className
.
I think it will work.
btw, I find another medium article using typings-for-css-modules-loader
-> link.