css-loader

Adding style attributes to a css class dynamically in react app

由 ♀尐吖头ヾ 提交于 2019-12-05 06:09:43
问题 I'm using webpack with css-loader to load my css styles and add them to React components. import styles from '../styles/cell.css'; .cell { border-radius: 50%; background-color: white; } <div className={styles.cell} /> I'm calculating the height/width for the cell dynamically. Here they describe how to add styles to components dynamically, but i'd prefer doing this without the style attribute. I tried doing this in one of the parent components thinking it might alter the css class but that

css-loader not importing .css file returning empty object

由 ╄→гoц情女王★ 提交于 2019-12-05 05:12:27
Importing style from css files. Returning empty object. Seems css-loader is not working correctly. Can anyone help me on this. Please find the reference files below index.js import React from 'react' import style from './header.css' console.log(style) // Returning empty object export default class Header extends React.PureComponent { render() { return( <header className = {style.header}> This is header component </header> ) } } ./header.css .header { background: #007DC6; } ./webpack.config.js { test: /\.css$/, exclude: /node_modules/, loaders: ['style-loader', 'css-loader'], }, { test: /\.css$

cannot find module css-loader while doing ng build -prod with angular-cli@1.0.0-beta.21

由 假如想象 提交于 2019-12-03 06:08:18
问题 I have following package.json configuration "dependencies": { "@angular/common": "2.2.1", "@angular/compiler": "2.2.1", "@angular/core": "2.2.1", "@angular/forms": "2.2.1", "@angular/http": "2.2.1", "@angular/platform-browser": "2.2.1", "@angular/platform-browser-dynamic": "2.2.1", "@angular/router": "3.2.1", "@angular2-material/button": "^2.0.0-alpha.8-2", "@angular2-material/button-toggle": "^2.0.0-alpha.8-2", "@angular2-material/card": "^2.0.0-alpha.8-2", "@angular2-material/checkbox": "^2

Sourcemaps with webpack css-loader

由 萝らか妹 提交于 2019-12-03 04:58:12
问题 I am struggling to get sourcemaps working with css-loader. Output in console: What the documentation from css-loader says: SourceMaps To include SourceMaps set the sourceMap query param. require("css-loader?sourceMap!./file.css") My webpack.config var webpack = require('webpack') module.exports = { entry: './src/client/js/App.js', output: { path: './public', filename: 'bundle.js', publicPath: '/' }, plugins: process.env.NODE_ENV === 'production' ? [ new webpack.optimize.DedupePlugin(), new

Import CSS from “node_modules” in Webpack

由 我是研究僧i 提交于 2019-12-03 04:30:59
Some third-party modules I'm using have their own CSS files. I'd like to include them in my app's one, single CSS file, which is processed by Webpack. How can CSS files under "node_modules" be imported into my CSS file? For example, I'm using the third-party react-select module, but I can't import its CSS file from node_modules : @import 'react-select/dist/react-datetime.css'; The relevant loader in webpack.config.js : { test: /\.css$/, use: ExtractTextPlugin.extract({ use: [ { loader: 'css-loader', options: { url: false } } ] }) } Andy Ray You can import files relative to your project's root

Sourcemaps with webpack css-loader

由 Deadly 提交于 2019-12-02 18:14:24
I am struggling to get sourcemaps working with css-loader. Output in console: What the documentation from css-loader says: SourceMaps To include SourceMaps set the sourceMap query param. require("css-loader?sourceMap!./file.css") My webpack.config var webpack = require('webpack') module.exports = { entry: './src/client/js/App.js', output: { path: './public', filename: 'bundle.js', publicPath: '/' }, plugins: process.env.NODE_ENV === 'production' ? [ new webpack.optimize.DedupePlugin(), new webpack.optimize.OccurrenceOrderPlugin(), new webpack.optimize.UglifyJsPlugin() ] : [], module: { loaders

webpack fails “module build failed: unknown word” with webpack.config.js file

由 六眼飞鱼酱① 提交于 2019-12-01 19:50:23
问题 webpack does not work for me when trying to add css using the css-loader. os: Windows 10 pro, webpack: 4.8.0 node: 8.9.4 npm: 6.0.0 css-loader: 0.28.11 style-loader: 0.21.0 package.json { "name": "webpack-dev", "version": "1.0.0", "description": "", "main": "index.php", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "./src/app.js" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "babel-core": "^6.26.3", "babel-loader": "^7.1.4", "babel

webpack fails “module build failed: unknown word” with webpack.config.js file

由 ぐ巨炮叔叔 提交于 2019-12-01 19:48:19
webpack does not work for me when trying to add css using the css-loader. os: Windows 10 pro, webpack: 4.8.0 node: 8.9.4 npm: 6.0.0 css-loader: 0.28.11 style-loader: 0.21.0 package.json { "name": "webpack-dev", "version": "1.0.0", "description": "", "main": "index.php", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "./src/app.js" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "babel-core": "^6.26.3", "babel-loader": "^7.1.4", "babel-preset-env": "^1.6.1", "css-loader": "^0.28.11", "extract-text-webpack-plugin": "^3.0.2", "file-loader": "

Import CSS from “node_modules” in Webpack

由 给你一囗甜甜゛ 提交于 2019-11-29 10:53:16
问题 Some third-party modules I'm using have their own CSS files. I'd like to include them in my app's one, single CSS file, which is processed by Webpack. How can CSS files under "node_modules" be imported into my CSS file? For example, I'm using the third-party react-select module, but I can't import its CSS file from node_modules : @import 'react-select/dist/react-datetime.css'; The relevant loader in webpack.config.js : { test: /\.css$/, use: ExtractTextPlugin.extract({ use: [ { loader: 'css

Webpack - background images not loading

由 ▼魔方 西西 提交于 2019-11-28 08:59:00
I'm fairly new to webpack but having some problems with css-loader or file-loader. I'm trying to load a background-image but it doesn't work quite right. The background-image isn't shown, even though the devtools show the background-image style. If I copy the background-image style to the element.style block, everything works fine. Am I making a stupid mistake somewhere? The body tag should have a background image. The style appears in the developer tools and there are no errors: I can load the file 5a09e4424f2ccffb6a33915700f5cb12.jpg , but the body has no background. If I manually copy and
订阅 css-loader