526 questions
1
vote
0
answers
63
views
Webpack changes URLs in CSS during build: how to keep original relative paths in url()
I have a CSS file with a @font-face declaration where font paths are specified as url("./icons/tficons.woff2"). However, when building with Webpack, these paths get rewritten to url(../tflex-...
- 112
1
vote
1
answer
111
views
Converting LESS files to CSS modules
I am trying to convert a legacy codebase of LESS files to CSS modules.
I updated the webpack's css-loader to look like this:
{
loader: 'css-loader',
options: {
modules: {
// for now, ...
- 12.1k
1
vote
1
answer
230
views
Webpack sass-loader not generating correct source maps
I have a webpack config which contains sass-loader. When i remove the sass-loader i can see properly generated source maps. But when i add sass-loader back sourcemaps are broken.
entry: {
...
- 180
1
vote
2
answers
220
views
Webpack not recognizing css-loader despite it being in config
for some reason webpack is not recognizing css-loader, despite it being in the config and being installed. Here is my webpack.config.json
const path = require('path')
module.exports = {
entry: './...
- 325
0
votes
0
answers
65
views
Giving complex names in css with webpack. But the classes in html do not change
I want to give complex class names in css with webpack, I have already done this. My current situation is that I import my css file to a js file and perform dynamic operations using the original names....
- 1
0
votes
0
answers
66
views
CSS modules is undefined while importing into react component
I am building a chrome extension utilizing react, webpack, tailwindcss and css modules.
But, when I try to import css modules into my react component, it turns out to be undefined.
src/InjectedPopup/...
0
votes
2
answers
847
views
Imported styles from scss module are undefined
I am using CSS Module and SCSS as my styling in my app, but when I import my styles as:
import styles from './landing.module.scss'
The imported styles is undefined.
I am using:
"css-loader":...
- 99
1
vote
0
answers
64
views
How to get url path for CSS at runtime?
I use CSS Modules.
I don't need resolving of url, but I need replace url paths with my custom function call so that I could get the full url at runtime by myself with my custom logic.
For example,
&...
1
vote
0
answers
717
views
"You forgot to add 'mini-css-extract-plugin' plugin" when work with thread-loader
Try to use thread-loader with mini-css-extract-plugin. When run npm build script, got error:
> cross-env NODE_ENV=production webpack
assets by status 958 bytes [cached] 1 asset
runtime modules 663 ...
- 104k
2
votes
2
answers
821
views
style-loader does not recoginize default imports of CSS modules in storybooks
I am setting up UI Storybooks with its newer version of 8.1.4 but could not get the style-loader and css-loader to work in a compatible way such that CSS modules can be properly loaded into the canvas ...
- 2,847
3
votes
1
answer
691
views
Module.css loaded successfully but undefined
I imported data from module.css, however it is undefined.
import styles from "../css/basic-styles.module.css";
console.log(styles) // undefined.
My basic-styels.module.css has data
*{
...
- 12.6k
1
vote
1
answer
673
views
I don't know how to configure the latest version of css-loader
Using the latest version of css-loader with Webpack 5.91.0, the imported CSS modules are always undefined when enabling cssModules. (This issue was resolved by downgrading css-loader to version 5.0.0.)...
- 13
1
vote
0
answers
30
views
Avoid flickering while loading the page (due to CSS being loaded after the HTML text, I guess) [duplicate]
I already searched here in SO for a while, for sure already exists something, but probably I'm missing the correct terms to search.
I started recently to bundle all my front-end assets in a single ...
- 16.6k
0
votes
2
answers
493
views
Webpack: stop css-loader from replacing svg urls with hashed svgs
I realized that my project at some point stopped showing svgs which I link from my scss files.
I have lines like:
background-image: url('./assets/icons/check-icon.svg');
Webpack, I suspect it's the ...
- 4,662
0
votes
0
answers
84
views
Build docker image step is failing in azure devops
I am using docker 20.x version and herewith I will post my package.json dev dependencies and docker file. In my case docker build image step is failing from npm install step.
Docker file:
FROM ...
- 1
0
votes
1
answer
686
views
Webpack 5 - Error: Module parse failed: Unexpected character '@'
I am attempting to load some .scss files in webpack 5 and then output them as .css files.
I have setup my config to take only .scss files as entries and use MiniCssExtractPlugin, css-loader, resolve-...
- 135
1
vote
1
answer
53
views
Module parse failed : Unexpexted character '@' 1:0
I am upgraded angular version from 15 to 16
Getting attached error after that
1
vote
0
answers
230
views
Unexpected character '@' (1:0): @charset "UTF-8"
After upgrading Angular from version 11 to 17, I'm encountering the following error:
File was processed with these loaders:
* ./node_modules/resolve-url-loader/index.js
* ./node_modules/sass-loader/...
- 81
0
votes
1
answer
106
views
Can not use background-image with webpack5
I have a problem with webpack5 and the use of background images. The problem is older, but I am a relatively new webpack user. As soon as I want to integrate a background image I get the info:
...
0
votes
1
answer
117
views
"Import * as" not working after upgraing some css related loaders
I upgraded the following packages to their latest versions:
package name
current version in project
upgraded version(latest version)
mini-css-extract-plugin
0.8.2
2.8.0
postcss-browser-reporter
0.5.0
...
-1
votes
1
answer
74
views
How to apply module wise class mapping for all css files inside a specific folder only [closed]
How to apply module wise class mapping for all CSS files inside a specific folder only
I have added the code below but it doesn't work
{
test: /.css$/i,
use: [
"style-loader",...
- 2,678
1
vote
1
answer
709
views
Export errors while exporting CSS using Webpack v5
WARNING in ./src/components/desktop/layout/AutoAuth.js 48:12-21
export 'layerHide' (imported as 'layerHide') was not found in '../../../css/layout.css' (possible exports: default)
@ ./src/components/...
- 11
0
votes
1
answer
139
views
How do I remove CSS comments use javascript?
var css = `
.test {
background-image: url(//www.google.com/image/1.png); // goole iamge
}
@font-face {
font-display: auto;
font-family: vant-icon;
font-style: normal;
font-weight: ...
- 1
1
vote
1
answer
537
views
How can I modify the insert method for Webpack style-loader?
The default behaviour of Webpack style-loader is to inject a style tag as the last child of the head tag. However, I want to modify the default insert method so that the css is injected into a shadow-...
- 101
0
votes
0
answers
149
views
webpack loader error with OpenLayer after migrating angular from v14 to v15 with Nx
I have migrated my app from Angular 14 to 15 using Nx (nx migrate). Npm i works well but then I have several errors when trying to nx serve.
`Error: Module parse failed: Unexpected token (3:24)
You ...
0
votes
0
answers
53
views
Webpack CSS class non applied to HTML elements and React components
I set up a project with Webpack, Lit2 and React.
I have a problem with CSS Stylesheet and React components. I created a stylesheet 'homesheet.module.css' and imported in my React component.
import ...
- 1
0
votes
0
answers
73
views
Remove css/html from the bundle after it has been required and processed by webpack
I am developing one node package myself to be able to publish it to node registry and i am using webpack for bundling using ES-6 syntax.
I am using css-loader in modules inside rules configuration ...
- 877
0
votes
1
answer
35
views
Webpack can't seem to load css
I am trying to create a npm package for a single .tsx component however When I run wepback I keep getting this error:
ERROR in ./src/Chatbot.tsx 184:20
Module parse failed: Unexpected token (184:20)
...
0
votes
0
answers
36
views
css-loader and webpack cause that in builded code style names are avaialbe in .default property
i have a problem with css-loader in webpack. I have a normal configuration (starndard webpack config file, with ts-loader, css-loader) and after sucessfull build, this can not work:
import * as css ...
- 43
4
votes
4
answers
9k
views
NextJS - TypeError: Cannot read properties of null (reading 'removeChild') when saving SASS file
I'm getting an error as such:
Unhandled Runtime Error
TypeError: Cannot read properties of null (reading 'removeChild')
Call Stack
HTMLLinkElement.eval
node_modules/next/dist/compiled/mini-css-...
- 1,230
1
vote
0
answers
65
views
Load Component's CSS only When Component is Rendered in React
There are two components wherein only one component will be rendered at a time conditionally. Every component has its respective CSS file which gets loaded inside the component using import statement, ...
- 3,091
0
votes
1
answer
260
views
Preact change webpack css loader config
I'd like to change the webpack config on Preact to have only hashed class names, and make them shorter as well if it's a safe practice.
The css loader works fine on my preact project but sometimes the ...
2
votes
0
answers
542
views
Ignore require from external package using Vite
I am setting up a new project using Vite. Setup is still simple with the basic config:
export default defineConfig({
server: {
port: 3000,
},
plugins: [react()],
});
Now, I did an npm ...
- 9,941
1
vote
1
answer
1k
views
How to specify multiple webpack output directories
I have a large django project, with multiple apps, and each application has its own static directory like this /[appname]/static/[appname]/[css, js, or img directory].
I have multiple entrypoints ...
- 108
1
vote
1
answer
597
views
How to setup loader for bootstrap for webpack ? or is there any better alternative than webpack?
I am stuck in adding css-loader for my bootstrap to the webpack, help please.
My file structure:
style.scss
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
index.js
...
- 123
0
votes
0
answers
551
views
Next.js css-loader module classnames do not match between html and css
I'am using tailwind css for my css framework, and I'am trying to Hash my tailwind css class using webpack css-loader, the css classes is completed to hash, but the html class is still showing the ...
- 53
0
votes
1
answer
2k
views
Refused to apply style because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled
In Electron-React-Webpack app I'm getting this error message:
web:1 Refused to apply style from 'http://localhost:3000/assets/css/icons/iconfont.css' because its MIME type ('text/html') is not a ...
- 3,242
0
votes
1
answer
776
views
webpack style loader and css loader not working for simple example
I attempting to follow the tutorial here https://webpack.js.org/guides/asset-management/ however I can never get the css file to load. (the text is never red)
I have tried all available solution which ...
1
vote
1
answer
417
views
Why is css-loader bloating my entry point bundle?
I'm working on cleaning up an older React project and trying to cut down on bundle size by implementing code splitting and chunking things out. I've made considerable progress, but my main entry point ...
- 1,494
1
vote
1
answer
474
views
How to exclude creation of css chunk files?
I have a project in which I have to build all the modules into one file, and also split it into modules.
But I don't need css files for modules except for one common.
My files:
file 'a.js'
import 'a....
1
vote
0
answers
584
views
Error when loading CSS with webpack css-loader
I try to import and reuse a CSS file to be injected in a shadow-root in Typescript but I cannot get it working with the webpack config.
Indeed, I tried adding the following code to Webpack:
{
test:...
- 623
3
votes
0
answers
416
views
Webpack style-loader and css-loader not working on a simple project
I am having an issue on a simple project, after configuring webpack.config.js
const HTMLPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const ...
- 31
1
vote
0
answers
441
views
Webpack css-loader and camelCase - How do I exclude a specific css file from being processed
I'm trying to exclude "swiper.min.css" to be excluded from processing as camelCase in my react webpack config but it keeps failing on other .css file when I do it like this.
I have tried ...
- 185
1
vote
0
answers
294
views
Webpack css loader issue while making server side rendering- React
I made an SSR project with basic requirements everything was fine until I used CSS in my project for styling but I got an error that the loader is not there for understanding CSS so I modified my ...
- 82
2
votes
1
answer
1k
views
Is there a way to export arbitrary named exports from a typescript declaration file?
When using [email protected] with css modules enabled and namedExports on, is there a way to wildcard import the file in Typescript and have the resulting type of each named export be a string?
// ...
- 8,357
1
vote
1
answer
2k
views
Webpack 5 and css-loader aren't compiling @value directive from CSS Modules
We have a React app with Webpack 5. There are some .scss files that are importing values from a component library installed in node_modules using the @value directive from CSS Modules. Everything was ...
- 13
1
vote
1
answer
702
views
How do I export every key of a map in Sass?
I have this map
$colors: (
black: $black,
blue1: $blue1,
blue2: $blue2,
blue3: $blue3,
blue4: $blue4,
blue5: $blue5,
blue6: $blue6,
coral1: $coral1,
coral2: $coral2,
coral3: $...
user11720384
1
vote
1
answer
838
views
webpack css-loader removing leading slash in url()
I have a path set in a scss file to a resource I need referenced off the root of the domain. The problem is css-loader removes the leading slash during build, even with the option { url: false }.
url('...
- 5,582
2
votes
0
answers
402
views
nextjs react storybook fails when importing css file
I am using nextjs + react + storybook with typescript.
I have one react component like
CropperModal.tsx
import 'cropperjs/dist/cropper.css';
rest of code
storybook crashes fails to start due to error
...
- 1,991
5
votes
0
answers
193
views
Can't import css as string when using MiniCssExtractPlugin
I'm using webpack. I need to load a css file as a string and I'm able to do so with css-loader, but I also need to use MiniCssExtractPlugin to inject css directly into the DOM. If I use ...
- 363