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
5
votes
0 answers

Error: postcss-svgo: Error in parsing SVG: Unquoted attribute value

I'm trying to deploy my nuxt app on Heroku, but everytime I try to deploy it, I get this error message that reads the following: ERROR in ./node_modules/argon-design-system-free/assets/css/argon.min.css…
Student22
  • 1,979
  • 5
  • 22
  • 33
5
votes
1 answer

Exclude some css files in webpack

I'm facing a problem with webpack. My project has the following structure. Folder structure: src js app.js // For importing app.scss file vendor.js // For importing vendor.scss file scss app.scss // Our custom styles …
Timmy Mucks
  • 207
  • 1
  • 3
  • 11
5
votes
1 answer

sourceMap with sass-loader and postcss-loader in Webpack

I'm trying to enable sourceMaps in webpack but there seems to be a problem with sass-loader and postcss-loader combination. With both sass-loader and postcss-loader enabled my console shows "no source": But when I disable postcss-loader the…
Tomarz
  • 1,097
  • 4
  • 15
  • 25
5
votes
1 answer

Webpack 4 css modules TypeError: Cannot read property 'context' of undefined

I just upgraded to webpack 4. I use css modules. ERROR: ERROR in ./client/src/common/accordian-component/accordian.css …
4
votes
3 answers

CRA project node v14.17.0 - Loading PostCSS "postcss-preset-env" plugin failed: Cannot find module 'node:vm'

I'm getting the following error when trying to start a CRA project running with node 14.17.0 -> Loading PostCSS "postcss-preset-env" plugin failed: Cannot find module 'node:vm' Compiled with problems:X ERROR in ./src/app.css…
niltonxp
  • 342
  • 4
  • 11
4
votes
0 answers

Exclude File Paths from Tailwind Config or PostCSS Loader

I am adding Tailwind to an Angular project, which I've done before on new setups without issue. The difference here is that I am adding our old bootstrap based theme to this project, and Tailwind. The idea is that we will slowly move to Tailwind…
pjlamb12
  • 2,300
  • 2
  • 32
  • 64
4
votes
1 answer

css-loader, export css modules mapping

When using postcss-loader (with postcss-modules) in webpack, I get a .json file for each .scss file I have with the css-module hash mappings. If I use css-loader with modules: true, I do not get such mapping file. Is it possible to also get one with…
rablentain
  • 6,641
  • 13
  • 50
  • 91
4
votes
2 answers

Import font awesome with webpack and postcss-loader

I am trying to update my webpack build to take advantage fo postcss and postcss-loader. However I am having problems loading fonts, images, etc. For example trying to get font awesome imported. This is my setup before postcss which…
lostintranslation
  • 23,756
  • 50
  • 159
  • 262
3
votes
2 answers

Tailwind CSS error in React (CRA). postcss-loader: Cannot read properties of undefined (reading '5')

I'm trying to use Tailwind CSS with React, but I'm running into a problem. There's no error when I use Tailwind CSS, but then I get: ERROR in ./src/index.css…
ki0
  • 31
  • 3
3
votes
1 answer

Postcss loader dont recognize custom tailwind class after Angular update

I'v just updated our project from Angular 10.1 to 13 due to vurnabilitys and now when i try to serve the project i got the following error: ./src/styles/global.css - Error: Module build failed (from…
Leon
  • 61
  • 1
  • 5
3
votes
0 answers

ReactJS / Styled-Components: CSS Compatibilty Issues Across Browers

Currently having CSS compatibility issues across browsers with a site built using react and linaria. Linaria is essentially a styled-components library that has its CSS-in-JS extracted into a CSS file during the build step. The solution I believe is…
3
votes
1 answer

React built with Webpack 5 typescript compiled with problems in browser. @tailwind directive not working postcss-loader postcss.config.js Emit skipped

I am trying to create a brand new react application from scratch using Webpack 5, Tailwind CSS, with Typescript. After combining a few tutorials together I am lost on how to get the postcss-loader to work for Tailwind. If i put in regular .css, it…
3
votes
1 answer

Migrating postcss-loader from 3.0.0 to 4.0.2 results in Error: [object Object] is not a PostCSS plugin

So Today I have been trying to migrate postscss-loader from version 3.0.0 to 4.0.2 I noticed since verion 4.0.0 they added postCSS as a peer dependency so I've added postcss version 7.0.27. I did not go for 8 as I also use 'postcss-import' and this…
BonifatiusK
  • 2,281
  • 5
  • 29
  • 43
3
votes
1 answer

Postcss-loader warning `variable is undefined and used without a fallback` for webpack entry with two CSS files

In webpack entry file index.js I'm just importing 2 CSS files a.css and b.css but it is not working because of b.css does not see variable from a.css: WARNING in b.css... variable --textColor is undefined and used without a fallback. How should I…
mikep
  • 5,880
  • 2
  • 30
  • 37
3
votes
0 answers

how to upgrade css-loader from v0.28 to v1.0.0?

In css-loader v0.28, I used root option ,but In css-loader v1.0.0,the option was removed,I checked the changelog(https://github.com/webpack-contrib/css-loader/blob/master/CHANGELOG.md) and Found this: remove root option, use postcss-loader with…
zhang olve
  • 89
  • 1
  • 10