When I try to import a .less from my React component I get the following error:
Module not found: '[object Object]' in /path/to/src
Here's a part of my webpack config that's taking care of css and less loading:
...
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: true,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
},
'postcss-loader'
]
})
},
{
test: /\.less$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
modules: true,
sourceMap: true,
importLoaders: true,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
},
'less-loader'
]
})
},
...
In my component, I'm importing the .less style file, like so:
import styles from './App.less'
I've tried reading related github issues and been debugging this for a while. Would love some help!
Related
Problem
When there are SASS variables imported in any TypeScript file, saving changes gets you stuck on Files successfully emitted, waiting for typecheck results... + browser tab with open devserver hangs.
What am I missing? Am I running out of resources? Is there a better way to import SASS variables into TypeScript files?
Files
_variables.scss
_export.module.scss
variables import
Relevant webpack config:
{
test: /\.(scss|sass)$/,
exclude: /\.module\.(scss|sass)$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: { importLoaders: 3, sourceMap: true }
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [Function: plugins],
sourceMap: true
}
},
{
loader: 'resolve-url-loader',
options: {
sourceMap: true,
root: './src'
}
},
{
loader: 'sass-loader',
options: { sourceMap: true }
}
],
sideEffects: true
},
{
test: /\.module\.(scss|sass)$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 3,
sourceMap: true,
modules: { getLocalIdent: [Function: getLocalIdent] }
}
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [Function: plugins],
sourceMap: true
}
},
{
loader: 'resolve-url-loader',
options: {
sourceMap: true,
root: './src'
}
},
{
loader: 'sass-loader',
options: { sourceMap: true }
}
]
},
Edit
In webpack I was mistakenly popping the ignorePlugin. Removing this mistake solved the browser hanging issue, but not Files successfully emitted, waiting for typecheck results... issue
Using absolute paths makes it harder to share the config with other developers. You can use the name of the loader directly in the config:
{
test: /\.(scss|sass)$/,
exclude: /\.module\.(scss|sass)$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: { importLoaders: 3, sourceMap: true }
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [Function: plugins],
sourceMap: true
}
},
{
loader: 'resolve-url-loader',
options: {
sourceMap: true,
root: './src'
}
},
{
loader: 'sass-loader',
options: { sourceMap: true }
}
],
sideEffects: true
},
{
test: /\.module\.(scss|sass)$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 3,
sourceMap: true,
modules: { getLocalIdent: [Function: getLocalIdent] }
}
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [Function: plugins],
sourceMap: true
}
},
{
loader: 'resolve-url-loader',
options: {
sourceMap: true,
root: './src'
}
},
{
loader: 'sass-loader',
options: { sourceMap: true }
}
]
},
I configured on my React webpack CSS Loader and Style Loader to obfuscate classNames when a CSS module is loaded.
Although the generated obfuscated className seems too long, I'd like to know if there is a parameter or something I can change on my configuration (webpack) to limit the className size.
ClassName example: _2BzySvHGRXbDRB3RRdNEOO
Webpack code:
{
test: /\.css$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
localsConvention: 'dashes'
}
}
]
}
You can use localIdentName to manipulate the CSS fields.
e.g.
{
test: /\.css$/i,
loader: 'css-loader',
options: {
modules: {
mode: 'local',
exportGlobals: true,
localIdentName: '[path][name]__[local]--[hash:base64:5]',
context: path.resolve(__dirname, 'src'),
hashPrefix: 'my-custom-hash',
},
},
},
This may not work depending on your webpack version:
What worked for the user:
ref:https://github.com/rails/webpacker/issues/2197
{ test: /\.css$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader',
options: {
modules: true,
importLoaders: 2,
localsConvention: 'dashes',
modules: { localIdentName: '[hash:base64:5]',
},
}
}
]
},
if you remove the hash from the end, or just use the hash, you'll significantly reduce the class name length. or you can write a custom function in its place to reduce it.
ref: https://github.com/webpack-contrib/css-loader#localidentname
ref: Modify output of localIdentName / getLocalIdent
I'm getting an error for css loader invalid option and my webpack.conifg.js code is as follows :
const path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin");
const htmlWebpackPlugin = new HtmlWebPackPlugin({
template: "./public/index.html"
});
module.exports = {
entry: "./src/index.js",
output: {
path: path.resolve('dist'),
filename: 'bundled.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.css$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
modules: true,
importLoaders: 1,
localIdentName:"[name]_[local]_[hash:base64]",
sourceMap: true,
minimize: true
}
}
]
},
{
test: /\.(png|jpg|woff|woff2|eot|ttf|svg)$/,
loader: 'url-loader?limit=100000'
}
]
},
plugins: [htmlWebpackPlugin]
};
I don't know where I'm doing wrong.Please help me to solve this issue. I'm using webpack for reactjs 4 and webpack version is 4. Thanks
This is what resolved my case:
css-loader 2.1.1
{ loader: 'style-loader'},
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[local]',
import: true,
importLoaders: true,
}
},
{ loader: 'sass-loader'}
css-loader 3.0.0
{ loader: 'style-loader'},
{
loader: 'css-loader',
options: {
modules: {
mode: 'local',
localIdentName: '[local]',
},
import: true,
importLoaders: true,
}
},
{ loader: 'sass-loader'}
Try commenting out:
// minimize: true
Commenting out minimize worked previously, though I began a new project with a fresh install of css-loader, and the culprit this time around is importLoader: 1. Just remove importLoader and it should work.
I'm using css modules with React, and everything is running properly.
This worked for my VUE Js project:
Browse to the /build/utils.js file and in the object of thecss-loader comment on the option that is marking you in the error. In my case I had to comment:
minimize: process.env.NODE_ENV === 'production',
I'm importing a PNG into my index.js file, thus:
import logo from './images/logo.png';
Further down in my index.js I'm calling the file, thus:
<div><img src={logo} alt="Logo" /></div>
My webpack is configured thus:
module.exports = {
module: {
rules: [
{
test: /\.(png|jp(e*)g|svg)$/,
use: [{
loader: 'url-loader',
options: {
limit: 8000, // Convert images < 8kb to base64 strings
name: 'images/[hash]-[name].[ext]'
}
}]
},
{
test: /\.js?$/,
exclude: /node_modules/,
loader: "babel-loader",
query: {
presets:['react']
}
},
{
test: /\.css$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
modules: true,
importLoaders: 1,
localIdentName: "[name]_[local]_[hash:base64]",
sourceMap: true,
minimize: true
}
}
]
}
]
},
plugins: [htmlPlugin]
};
However, I'm getting errors stating that the 'url-loader' can't be resolved.
Just to give more context my file structure is thus:
images
- clark-logo.png
index.css
index.html
index.js
Does anyone know what the problem may be?
Just for the record, as a solution to your problem:
url-loader needs to be installed using: npm i url-loader
I'm using Webpack 3 + Sass Loader + Sass Resources Loader to build a multi theme React App.
This is my webpack.config :
{
test: /\.css$/,
exclude: /node_modules/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: true,
minimize: IS_PRODUCTION,
sourceMap: IS_DEVELOPMENT,
localIdentName: IS_DEVELOPMENT ? '[name]__[local]__[hash:8]' : '[hash:8]'
},
},
{
loader: 'postcss-loader',
options: {
sourceMap: IS_DEVELOPMENT,
plugins: postCssPlugins,
}
},
],
}),
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract({
use: [
{
loader: 'css-loader',
options: {
sourceMap: IS_DEVELOPMENT,
}
},
{
loader: 'sass-loader',
options: {
sourceMap: IS_DEVELOPMENT
}
},
{
loader: 'sass-resources-loader',
options: {
sourceMap: IS_DEVELOPMENT,
resources: [
'./common/style/flaticon/_flaticon_class.scss',
`./common/branding/${BRANDING}/${BRANDING}.scss`,
'./common/style/bootstrap/_general_variables.scss',
'./node_modules/bootstrap/scss/bootstrap-reboot.scss', // functions, variables, mixins, reboot
'./node_modules/bootstrap/scss/_root.scss',
'./node_modules/bootstrap/scss/_type.scss',
'./node_modules/bootstrap/scss/_images.scss',
'./node_modules/bootstrap/scss/_grid.scss',
'./node_modules/bootstrap/scss/_utilities.scss',
]
},
},
]
})
},
Actually, It's working fine, but when I try to import my scss files into my react component and exploit it like a css file, the class name is undefined.
In my component file :
import styles from './ActivityGridItem.scss';
...
<div className={`m-2 ${styles.activityTypeIcon}`}></div>
Normally, the style .activityTypeIcon should be applied to my div, but right now it's undefined.
I try to add the options "modules: true" like this :
test: /\.scss$/,
loader: ExtractTextPlugin.extract({
use: [
{
loader: 'css-loader',
options: {
modules: true,
sourceMap: IS_DEVELOPMENT,
}
},
But then, every sass files are recognized as a module and I cannot use the global boostrap class, as row, col, m-*, etc.
There's a couple of ways to do it
You can use global block in css-modules to make bootstrap classes global.
You can create 2 loaders, one with css-modules enabled and another with global styles and differentiate them somehow. For example, you might make all files that end with .module.scss use modules: true.