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

Module build error stating that "if" is an unknown word in the postcss-loader index.js file

I've been struggling to load css dependencies into my Vue.js webpack template, and thought I'd finally figured it out-- when suddenly it started throwing a failure to compile error centered around the postcss-loader's index.js file. This is the…
Amanda Harvey
  • 529
  • 5
  • 24
2
votes
1 answer

Webpack: postcss-loader is ignoring config file

Currently I have the following webpack configuration, which works fine: { loader: require.resolve('postcss-loader'), options: { ident: 'postcss', plugins: () => [ require('postcss-flexbugs-fixes'), autoprefixer({ …
Fab313
  • 2,268
  • 2
  • 25
  • 28
1
vote
1 answer

Error with loading styles, webpack + swagger-ui

I'm getting an error when trying to run quite simple app that uses swagger-ui-react component. Something breaks when loaders try to load styles from swagger-ui-react/swagger-ui.css. Here's my setup (you can find a repo which reporoduces issue…
1
vote
0 answers

Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/postcss-loader/dist/cjs.js):

When i run ng server i have those errors: The point is that i am trying to update angular 13 to angular 14, however, if i do not user webpack i have a problem with @ in css and looking for info i found that i need a loader so i thought that i should…
Naomi
  • 37
  • 5
1
vote
1 answer

Webpack 5 and css-loader aren't compiling @value directive from CSS Modules

We have a React app with Webpack 5. There are some .scss files that are importing values from a component library installed in node_modules using the @value directive from CSS Modules. Everything was working great until css-loader version 3, but we…
Luks
  • 13
  • 2
1
vote
0 answers

Webpack 5 is not working with tailwindcss, postcss-loader - WordPress

I'm trying to build a webpack config that transpiles sass and utilizes the postcss, precss, autoprefixer plugin. Having researched and tried out various solutions to this, I have come up with the following setup: webpack.config.js const path =…
Ravi
  • 397
  • 5
  • 14
1
vote
0 answers

CSS sourceMap with sass-loader, postcss-loader, and MiniCssExtractPlugin in Webpack 5

Seems like I've followed all the instructions to generate CSS source maps, but still not finding them in the output CSS (I expect to see something like /*# sourceMappingURL=base.css.map */ in the output). Here are the relevant bits of my Webpack…
1
vote
0 answers

How to correctly load .pcss - postcss files with webpack?

I'm trying, without success so far, to load postcss , .pcss files with webpack Packages installed : "postcss": "^8.4.13", "postcss-flexbugs-fixes": "^5.0.2", "postcss-loader": "^6.2.1", "extract-text-webpack-plugin": "^3.0.2" "webpack":…
Raphael10
  • 2,508
  • 7
  • 22
  • 50
1
vote
1 answer

using vue3 + vite + ckeditor5 config postcss-loader

I am doing migration vue3 project from webpack to vite. Everything was going well except for the ckeditor. In ck-editor, there is a configuration doing .css and .svg file…
1
vote
1 answer

Webpack - Postcss nesting not working used as suggested

I have this simple css that uses a nested rule. .root { background: var(--color-accent); padding: 0.8rem 1.5rem; color: var(--color-white); text-decoration: none; &:hover { background: var(--color-purple); } } I am using…
mahan
  • 12,366
  • 5
  • 48
  • 83
1
vote
0 answers

Configure postcss-import to allow "@import" anywhere on a file?

While using the latest version of postcss-import, I've noticed that it only allows @import statements at the top of the files similar to this: @import "button.css; .some-class { color: red; } My question here is, is there some way to configure…
sgarcia.dev
  • 5,671
  • 14
  • 46
  • 80
1
vote
1 answer

Imported @value values are undefined

We're trying to take part of our React application and build it into a library for use by business partners. The original React application is a Create React App application and we're trying to achieve this without ejecting the application. We've…
DecafCoder
  • 346
  • 5
  • 14
1
vote
0 answers

Nuxtjs: Module build failed (from ./node_modules/css-loader/dist/cjs.js):

I want to include the Front end tamplate that I bought ready-made in my nuxt project, but it gives an error. I shared the error on the terminal screen and the files I added in the attachment. Error in terminal Added files and folders index sayfamda…
Ahmet
  • 11
  • 1
1
vote
0 answers

React and Rails: Custom property ignored: not scoped to the top-level :root element

I'm compiling my rails app with webpack and getting an error in the logs. It's associated with using react-bootstrap, but I'm trying to figure out how to resolve this error that repeats a dozen or more times. I get the error in the…
1
vote
2 answers

Reconciling antd import with postcss

I am trying to use postcss-env-function in order to be able to share variables between javascript and less/css. I get the following error during build. The error disappears if I remove the first line of index.less: @import…
mikael
  • 2,097
  • 3
  • 18
  • 24