css-loader

How to remove all comments with CSS Loader with webpack 2 in string mode?

由 梦想的初衷 提交于 2020-12-08 06:44:06
问题 I use this config for my webpack 2 { test: /\.css$/i, use: ExtractTextPlugin.extract({ use: 'css-loader?minimize' }) } How to remove all comments based on string mode ? I use this but does not work 'css-loader?minimize&{discardComments:{removeAll:true}}' Can anyone help me ? 回答1: You could use optimize-css-assets-webpack-plugin to remove comments: example 回答2: Might as well keep going and add SASS in there also. Here is our config. const style_loader = ExtractTextPlugin.extract({ fallback:

Unload/remove dynamically loaded css files

由 主宰稳场 提交于 2020-08-09 12:25:34
问题 After loading a css file like this: const themes = ['dark-theme.css', 'light-theme.css']; async function loadcss(file) { return await import(file); } loadcss(themes[0]).then(console.log) The console output is an empty object for me and a new annonymous < style> tag sits in the < head> of my index.html. So far so good, but what if I (in this example) want to change the theme to light-theme.css . That would merge both themes as dark-theme.css is already loaded. Is there a way to remove the <

Unload/remove dynamically loaded css files

由 左心房为你撑大大i 提交于 2020-08-09 12:25:10
问题 After loading a css file like this: const themes = ['dark-theme.css', 'light-theme.css']; async function loadcss(file) { return await import(file); } loadcss(themes[0]).then(console.log) The console output is an empty object for me and a new annonymous < style> tag sits in the < head> of my index.html. So far so good, but what if I (in this example) want to change the theme to light-theme.css . That would merge both themes as dark-theme.css is already loaded. Is there a way to remove the <

Next.js 9 import third party plugin css

由 ﹥＞﹥吖頭↗ 提交于 2020-07-22 07:50:19
问题 I want to use owl.carousel plugin in one of my components but I do not want to import owl.carousel.css globally in _app.js because the plugin css file is large and I want to import it just in the component that will use it and not in all the pages. Is there any way to import it just in one of my components using NEXT.JS 9 build in css support? 回答1: It seems Next.js doesn't have a built-in CSS support for this case. You can add a regular <link> stylesheet in your component. const Foo = () => (

Webpack loader configuration to load css and sass files for React JS

由 北慕城南 提交于 2020-07-09 11:57:30
问题 I have installed react-h5-audio-player in a React app made with create-react-app and it worked fine. I did same to customized React project and I am being asked to configure webpack to load the css files. webpack.config.js module.exports = { module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: "babel-loader" } } ] } }; I have attached screenshot of error log and code section where error happened The error ( ERROR in ./node_modules/react-h5-audio-player/lib/styles.css 1

Webpack loader configuration to load css and sass files for React JS

由 北慕城南 提交于 2020-07-09 11:57:07
问题 I have installed react-h5-audio-player in a React app made with create-react-app and it worked fine. I did same to customized React project and I am being asked to configure webpack to load the css files. webpack.config.js module.exports = { module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: "babel-loader" } } ] } }; I have attached screenshot of error log and code section where error happened The error ( ERROR in ./node_modules/react-h5-audio-player/lib/styles.css 1

How to move css links to the bottom of the html document with webpack?

由 六眼飞鱼酱① 提交于 2020-05-17 07:59:29
问题 The way my webpack is currently being set up, it places the css resources links in the head of the document, which blocks the rendering of my initial content. Example: <head> <link href="main.28396255e7678a2cdf3c.css" rel="stylesheet"> </head> Therefore, I'd like to move them at the bottom of the document, right before </body> . Is there a way to configure what I already have, to achieve this, or is there maybe a plugin I wasn't able to find? Here's some of my webpack config: {{ entry: { app:

Nested classes not working in CSS Modules with webpack

由 孤人 提交于 2020-04-16 15:28:11
问题 Im using webpack and css-loader and style-loader to enable css modules in my React app. These are the following setup: Webpack config: module.exports = { mode: "development", entry: __dirname + "/app/index.js", module: { rules: [ { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }, { test: /\.css$/, use: [ "style-loader", { loader: "css-loader", options: { modules: true, localIdentName: "[name]__[local]___[hash:base64:5]" } } ] } ] }, output: { filename: "bundle.js", path: _

How to import CSS-Modules correctly with Nuxt?

由 北城以北 提交于 2020-01-16 17:24:29
问题 I'm using CSS Modules with Nuxt and have run into some issues when trying to import a stylesheet in my js. If I import my stylesheet directly into the... `<style module> @import './index.css'; </style>` ...everything works as expected. In my particular case I need to run a computed property to choose between two different stylesheets so instead of importing through the <style module> I need to import into <script> and implement the styles like so: <script> import foo from './index.css' export

Relative CSS urls in Webpack

由 允我心安 提交于 2020-01-01 10:06:53
问题 Webpack + file-loader + sass-loader is having trouble resolving relative paths for CSS background images. The compiled SCSS file contains a path to the background image that is relative to /dist/ instead of relative to the SCSS/CSS document. I researched this problem; sass-loader recommends using resolve-url-loader (with source maps). However, adding the resolve-url-loader made no difference to the compiled CSS. I have been able to resolve the issue by setting the 'publicPath' to '../..' on
订阅 css-loader