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
Related
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 unable to reference a background image in my react index html file. I see the following error:
GET http://localhost:8080/background.png 404 (Not Found)
I think it has something to do with my webpack.config! This is set up as follows:
const HtmlWebPackPlugin = require("html-webpack-plugin");
const htmlPlugin = new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
});
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]
};
Does anyone know what I might need to change? Do I have to configure file-loader?
For the project I use the React-Quill package https://github.com/zenoamaro/react-quill, it is indicated that you can import import 'react-quill / dist / quill.snow.css' styles.
Such import into the project component does not include styles, since the project uses css-modules. How to import styles in this case?
webpack config
{
test: /\.css$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
module: true,
importLoaders: 1,
localIdentName: '[path][name]__[local]'
}
},
{
loader: 'postcss-loader'
}
]
},
You can use a resourceQuery so you are able to load regular global CSS as well as CSS modules.
Example
module.exports = {
//...
module: {
rules: [
{
test: /.css$/,
oneOf: [
{
// import 'react-quill/dist/quill.snow.css?global'
resourceQuery: /global/,
use: ['style-loader', 'css-loader', 'postcss-loader']
},
{
use: ['style-loader', 'css-loader', 'postcss-loader'],
options: {
modules: true,
localIdentName: '[name]__[local]_[hash:base64:5]'
}
}
]
}
]
}
};
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.