css-loader

问题 im building a react app and i imported a slider in a file and then i got a css-loader, im also using webpack here is my slider - import React, {useState} from 'react'; import RubberSlider from '@shwilliam/react-rubber-slider'; import styles from '@shwilliam/react-rubber-slider/dist/styles.css'; export const Slider = () => { const [value, setValue] = useState(0.5) return <RubberSlider width={250} value={value} onChange={setValue} /> } this ^ will go in another component and get called on but

问题 im building a react app and i imported a slider in a file and then i got a css-loader, im also using webpack here is my slider - import React, {useState} from 'react'; import RubberSlider from '@shwilliam/react-rubber-slider'; import styles from '@shwilliam/react-rubber-slider/dist/styles.css'; export const Slider = () => { const [value, setValue] = useState(0.5) return <RubberSlider width={250} value={value} onChange={setValue} /> } this ^ will go in another component and get called on but

问题 When running Webpack, I get the following error: ./src/css/main.css 3.62 KiB {0} [not cacheable] [built] [failed] [1 error] ERROR in ./src/css/main.css Module build failed (from ./node_modules/css-loader/dist/cjs.js): ... accumulator[normalizedUrl] = { ...accumulator[normalizedUrl], ^^^ ... webpack.config.js: module: { rules: [ { test: /\.css$/i, use: ['css-loader'] } ] } css: body { background-color:purple; } js: import css from '../css/main.css'; on js file, if I enter import '../css/main

问题 If I have a react component and I want to pass in a className, how do I do this with CSS Modules. It currently just gives the className but not the hash generated css module name which I would get for <div className={styles.tile + ' ' + styles.blue}> Here is my Tile.js component import React, { Component } from 'react'; import styles from './Tile.css'; class Tile extends Component { render() { return ( <div className={styles.tile + ' ' + this.props.color}> {this.props.children} </div> ); } };

问题 I have some files. Webpack config { test: cssModuleRegex, use: [ { loader: 'style-loader' }, { loader: 'css-loader', options: { modules: true, } }, ] }, main.module.scss .page { height: 100vh; display: flex; align-items: center; justify-content: center; } and i use it in react component as css-module import styles from './main.module.scss'; export class Main extends PureComponent<Props> { render() { return ( <div className={ styles.page }> <Logo /> </div> ); } } But it doesn't work If i

问题 There are some HTML chunks as strings in my JS file. For example: `<span class="${currentIndex === index ? 'right' : ''} ${get(item, 'observed') === true ? 'observed' : ''}" data-index="${index}" data-item-id="${get(item, 'id')}"> <b style="animation-duration:${get(item, 'length') === '' ? '200' : get(item, 'length')}s"></b> </span>` The SCSS files are also imported in the JS file and the bundling works perfectly. But, when I try to enable the "modules: true" option in the css-loader, the

问题 I am developing a widget, which can be embedded on "any" website and using the css-loader to give my CSS-class unique names to avoid conflicts. In my webpack.config.js I have the following line: localIdentName: 'productname-[folder]-[local]', This outputs classnames like: productname-src-widgetbox productname-Sidebar-sidebar Is it possible to remove all "-src" from the classnames and lowercase everything? I found a solution, where I just copied the whole original getLocalIdent() and prepended

问题 I am developing a widget, which can be embedded on "any" website and using the css-loader to give my CSS-class unique names to avoid conflicts. In my webpack.config.js I have the following line: localIdentName: 'productname-[folder]-[local]', This outputs classnames like: productname-src-widgetbox productname-Sidebar-sidebar Is it possible to remove all "-src" from the classnames and lowercase everything? I found a solution, where I just copied the whole original getLocalIdent() and prepended

问题 There are a few SO posts about style-loader and css-loader , but despite this I have not been able to find a solution to my problem. In short summary, when I @import css files in other css files, and the imported css contains url() s with relative paths, the paths are not resolved correctly. Basically, the error message shows that Webpack ends up thinking the url() paths in the imported css are relative to src (main entry point), rather than being relative to the css file it it is imported

问题 I am using CSS Modules in an Angular Project with Webpack. I had already transformed the class names in .css and .scss files with postcss-modules. Then with posthtml-css-modules I had changed the values on the class property in html elements for his hash value defined by postcss-modules . I can say that everything is working fine 💪. Now, I have a new challenge to resolve. Angular, has a feature that allows you to change dynamically the value of class in a html element depending on a condition