Questions tagged [postcss-loader]

configure postcss for css assets transformations inside webpack process

instead of postcss.config.js postcss configuration can be set inside webpack.config:

{
  loader: 'postcss-loader',
  options: {
    config: {
      ...
    }
  }
}

Other problematic that cover this topic: cascade configuration and postcss plugins configuration.

https://github.com/postcss/postcss-loader

119 questions
55
votes
5 answers

No PostCSS config found

I am trying to learn reactjs according to a tutorial. Meanwhile the tutorial instructs to use webpack for compiling stylesheets and JS assets. I am stuck in an error where the stylesheets cannot get compiled and throws following error while…
Birendra Gurung
  • 2,168
  • 2
  • 16
  • 29
22
votes
7 answers

CSS error source-map information is not available at URL() declaration (found orphan CR, try removeCR option)

I am having a problem when I execute NPM start in my project. I get this error message: ./src/assets/base.scss…
21
votes
7 answers

"Unknown word" error showing after adding postcss-loader

I am trying to add postcss loader in my webpack but after adding postcss loader showing Unknown word error. I also attached error screenshot. please find attachment. Not sure what error is.... I also added postcss-loader, sass-loader ,css-loader…
Nagesh Fultambkar
  • 546
  • 1
  • 7
  • 22
12
votes
1 answer

Postcss-loader not minifying css output

I'm using webpack and postcss-loader to autoprefix and minify my CSS, before loading it into css-loader to use css-modules. I'm having trouble with minifying CSS. Examining the emitted .js file by webpack shows the CSS isn't minified with cssnano…
Tijs
  • 1,257
  • 1
  • 8
  • 13
11
votes
0 answers

How do I configure NextJS to correctly handle alias paths within scss?

I've created a nextjs app within my NX monorepo and I've started porting an existing NX app (within the same monorepo) to it. My NX monorepo is set up with many alias's, all of them configured within the root tsconfig.base.json file. For instance,…
gxc
  • 4,946
  • 6
  • 37
  • 55
11
votes
3 answers

Webpack postcss loader, what's its purpose?

I am trying to find out, what the postcss-loader is good for. On the github page https://github.com/postcss/postcss-loader it says: Loader for webpack to process CSS with PostCSS I dont't get that: So, PostCSS is a a WP-Loader to process CSS with…
LongHike
  • 4,016
  • 4
  • 37
  • 76
9
votes
1 answer

How do I load local fonts with @rails/webpacker?

I’m having an issue loading local font files with @rails/webpacker. The fonts are loaded in the development environment but not in the production environment. It seems like a really simple issue but I have just had so much trouble with it. Below is…
einar_j
  • 141
  • 1
  • 4
9
votes
1 answer

How do I add an additional postcss plugin via the new @angular/cli v7 angular.json or custom-webpack.config.js?

@angular/cli@7+ allows a customWebpackConfig to be specified to provide custom webpack configuration, such as: "architect": { "build": { "builder": "@angular-builders/custom-webpack:browser", "options": { …
Michael
  • 91
  • 3
7
votes
3 answers

Using postcss-loader after css-loader

I am using CSS modules with webpack css-loader, then I bundle them with mini-css-extract-plugin. Here is how my config looks like: { test: /\.css$/, use: [ MiniCssExtractPlugin.loader, { loader: "css-loader", …
Grundiss
  • 153
  • 9
7
votes
1 answer

Invalid PostCSS Plugin found: [0]

I'm struggling now for days getting my Spring Boot App to work again... I wanted to deploy my application to Heroku and I got a really strange error: Uncaught Error: Module build failed: TypeError: Invalid PostCSS Plugin found: [0] at…
dave0688
  • 5,372
  • 7
  • 33
  • 64
7
votes
1 answer

Is css-loader neccessary if you use postcss-loader with appropriate plugins?

I'm using postcss-import to take care of my imports, and cssnano to minify. In my Webpack config I've been using the following setup for css-loader... { loader: 'css-loader', options: { url: false, import: false, minimize: false, …
6
votes
0 answers

How to use Bootstrap 5 RTL with angular cli

Bootstrap 5 has RTL support as they said in their document they use RTLCSS for handling RTL styles. In order to integrate RTLCSS with angular, I used ngx-build-plus and custom-webpack plugin to inject RTLCSS webpack rule into angular however when I…
Daniel.V
  • 2,322
  • 7
  • 28
  • 58
6
votes
1 answer

How do I get postcss-loader, postcss-cssnext and sass-loader to work together in webpack?

This is my Webpack configs for scss/css files. ... { test: /\.s?css$/, use: [ 'style-loader', { loader: 'css-loader', options: { importLoaders: 2 } }, { loader: 'postcss-loader', options: { ident:…
hwkd
  • 2,411
  • 3
  • 18
  • 27
6
votes
2 answers

Postcss-loader Autoprefixer not working with Webpack 3

I'm attempting to use a series of loaders to extract all the SCSS files into one file with ExtractTextPlugin. Within the series of loaders I have, I'm using the autoprefixer plugin that is used within postcss-loader. However, nothing seems to be…
Xenyal
  • 2,136
  • 2
  • 24
  • 51
5
votes
1 answer

Storybook errors when adding tailwindcss

I'm trying to add tailwindcss v3 to existing storybook setup. I have tried and followed every guide out there with similar features. Please help. What it was working before trying to setup tailwindcss Storybook ran and compiled components and…
1
2 3 4 5 6 7 8