webpack-style-loader

问题 I have following structure for styles in my application: application - css/ - bootstrap/ - boostrap.less -> has (@import "another.less") - another.less - common/ - common.less - entries/ - bootstrap.js -> has (import style from "../bootstrap/bootstrap.less") - common.js -> has (import common from "../common/common.less") And now I need to create separate CSS-es from styles imported to entries bootstrap.js and common.js. webpack.config.js const MiniCssExtractPlugin = require("mini-css-extract

问题 Using the following postcss plugins: postcss-cssnext postcss-nested postcss-color-function I constantly hit the following error, when using the following color function. Unable to parse color from string "l(-20%)" styles.css @import 'variables.css'; // ^-- contains: --blue: #3892e0; & a { color: color(var(--blue), l(-20%)); &:hover { color: color(var(--blue), l(0%)); } } Webpack 2 snippet { loader: 'postcss-loader', options: { plugins: [ cssImport({ path: './src' }), cssnext({ browsers: [

问题 I have created an application using webpack and reactjs. So far I have created 2 pages. I have defined CSS styling for both the pages. But when I load page 2 after loading page 1, the styles from page 1 are interfering with those of page 2. For example Page 1 require('style1.css'); var Page1 = React.createClass({ render: function(){ return( <div> <h1>This is Page1</h1> <span> hello from page1</span></div> ) } }); module.exports = Page1; style1.css span { color : red } Page 2 require('style2

问题 I have created an application using webpack and reactjs. So far I have created 2 pages. I have defined CSS styling for both the pages. But when I load page 2 after loading page 1, the styles from page 1 are interfering with those of page 2. For example Page 1 require('style1.css'); var Page1 = React.createClass({ render: function(){ return( <div> <h1>This is Page1</h1> <span> hello from page1</span></div> ) } }); module.exports = Page1; style1.css span { color : red } Page 2 require('style2

问题 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 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

问题 After updating npm & node to their last versions, I get following errors when I try to run my vue project: These dependencies were not found: !!vue-style-loader!css-loader!../../../../../../../../../swlkagenda/1.2.0/build/node_modules/vue-loader/lib/style-rewriter?id=data-v-c906422a&scoped=true!wisaapp/login/login.css in /home/projects/wisaweb/trunk/app/modules/wisaapp/login/login.vue I get same errors for all of my vue files, which all look like as follows: Login.vue: <template src="wisaapp

问题 After updating npm & node to their last versions, I get following errors when I try to run my vue project: These dependencies were not found: !!vue-style-loader!css-loader!../../../../../../../../../swlkagenda/1.2.0/build/node_modules/vue-loader/lib/style-rewriter?id=data-v-c906422a&scoped=true!wisaapp/login/login.css in /home/projects/wisaweb/trunk/app/modules/wisaapp/login/login.vue I get same errors for all of my vue files, which all look like as follows: Login.vue: <template src="wisaapp