I am trying to utilize the react-spinkit package for my React.js web application. Within this application I have opted to use CSS modules. When I made the switch to CSS modules, I noticed that the spinner component that I created was not rendering. I am sure this has to do with the fact that I am now using CSS modules. Currently my webpack.config.js file looks something like this:
module.exports = {
//other configurations...
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: 'babel-loader'
},
{
test: /\.css$/,
loader: 'style-loader!css-loader? modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
}
]
}
}
I believe that I need to set a rule for regular css to be compiled by the css-loader. However, I am not aware of how to combine a rule so that the css-loader can use both css modules and regular css. Any help would be appreciated.
try having your config look like this in that section:
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
Related
Unexpected token (1:0) #import "./variables"; Getting this error using webpack
my webpack.config is like this module:
{
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
},
{
test: /\.scss$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" },
{ loader: "sass-loader" }
]
}
]
}
Any one help me to sort the issue
Sass-loader seems to be incompatible with webpack 4.
You can use mini-css-extract-plugin which I use with webpack 4.
https://github.com/webpack-contrib/mini-css-extract-plugin
People are facing this #import issue with webpack 4. Take a look at following thread.
https://gist.github.com/mburakerman/629783c16acf5e5f03de60528d3139af
Right now I'm trying to create the above compiler using npm and gulp. But I keep getting stuck.
I only need it to compile jsx and stylus files to run on a localhost server.
In your webpack config, Add loader for jsx and stylus like below code.
For JSX & Stylus:
module: {
loaders: [
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.styl$/,
loader: 'css-loader!stylus-relative-loader?paths=node_modules/bootstrap-stylus/stylus/'
}
]
},
I am using react-bootstrap and css modules. In my webpack.config.js i am able to run my bootstrap.css with this config:
{ test: /\.css$/, loader: "style-loader!css-loader" }
However my css modules should have this setup:
{
test: /\.css$/,
loaders: [
'style?sourceMap',
'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
]
}
How do I combine them to make it work for css modules and react-bootstrap
You might keep both loaders: one for global CSS (like Bootstrap) and the other for CSS modules.
In order to avoid conflicts between loaders with same test property, use webpack's rules include and exclude properties:
{
test: /\.css$/,
loader: "style-loader!css-loader",
include: [
/* Paths to Bootstrap and further global CSS only */
]
},
{
test: /\.css$/,
loaders: [
'style?sourceMap',
'css?modules&importLoaders=1&localIdentName[path]___[name]__[local]___[hash:base64:5]'
],
include: [
/* eg. Paths to your source directory */
]
}
I have my webpack config loaders as like this:
//config for css
{ test: /\.css$/, loader: "style-loader!css-loader" },
{ test: /\.png$/, loader: "url-loader?limit=100000" },
{ test: /\.jpg$/, loader: "file-loader" }
and in my React component I have:
import styles from "../../../css/style.css"
and my style.css looks like:
#box {
}
but in my react component if I refer to styles its just returning {}, I expect it should have box key. But it doesn't, where I'm making mistake?
I think you need enable css-modules
{ test: /\.css$/, loader: "style-loader!css-loader?modules"
Example
I have a webpack.config with loaders like this:
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loaders: [ 'react-hot', 'babel-loader' ]
},
{
exclude: /node_modules/,
loader: 'eslint-loader',
test: /\.js$/
}
],
I exclude node_modules because other ways react-hot would get in trouble saying things like this
My problem is that: by excluding node_module, a private npm package that needs babel-loader, would not be loaded into the bundle.
How can I manage excluding for each loader?
You can use the include property for the loader instead of exclude. For example:
loaders: [
{
test: /\.js$/,
include: [
path.resolve(__dirname, "app/src"),
// some module in node_modules folder
],
loaders: [ 'react-hot', 'babel-loader' ]
},
...
],
Note that both webpack and react-hot-loader recommend using include over exclude whenever possible.