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
3
votes
1 answer

How to import global css in Vue with PostCSS?

My Vue project structure: styles directory includes all css file. src ├── assets ├── components ├── styles │ ├── main.css │ ├── normalize.css │ └── variables.css ├── views ├── App.vue ├── main.ts ├── router.ts The src/styles/main.css import…
junlin
  • 1,835
  • 2
  • 25
  • 38
3
votes
1 answer

CSS variables not resolving when file is imported into another file

I am working on a project where I am developing a set of UI components for developers to use to build out their sites. I have created an NPM package which consists of just the CSS required to implement an Accordion component. I installed my…
James Howell
  • 1,392
  • 5
  • 24
  • 42
3
votes
0 answers

How to run a webpack plugin after another?

I have the files: /* variables.scss */ :root { --color: red; } /* button.scss */ .color { color: var(--color); } And I import then in JS: /* index.js */ import "./variavles.scss"; import "./button.scss"; I'm using postcss-cssnext to…
2
votes
0 answers

nextjs react storybook fails when importing css file

I am using nextjs + react + storybook with typescript. I have one react component like CropperModal.tsx import 'cropperjs/dist/cropper.css'; rest of code storybook crashes fails to start due to error ERROR in…
Kristi Jorgji
  • 1,154
  • 1
  • 14
  • 39
2
votes
1 answer

Symfony 6 with TailwindCSS 3: Tailwind components css not generated

I've installed TailwindCSS 3 to my Symfony 6 project. It works mostly. Only the TailwindCSS components CSS will not be generated. Here's my config and the results. webpack.config.js: .enablePostCssLoader((options) => { options.postcssOptions =…
Dominique
  • 51
  • 7
2
votes
1 answer

nuxt styles won't be applied in production mode

it is been about four months that i am working on this project. it is totally okay in development version but when i build the project and upload it to server some of my styles won't be applied. for more information i have imported styles both in…
rozhan
  • 321
  • 1
  • 3
  • 12
2
votes
1 answer

How to load a CSS into a JavaScript variable in Webpack 5?

I have style.css section { display: flex; background: url('./bg.svg'); } script.mjs import css from './style.css' console.log(css) webpack.config.mjs import path from 'path' import url from 'url'; import autoprefixer from…
Mihail H.
  • 1,555
  • 16
  • 18
2
votes
1 answer

Tailwind with Sass: Invalid PostCSS Plugin found at: plugins[0]

I'm trying to use TailwindCSS on my PostCSS, along with Sass as a preprocessor. Whenever I attempt to start my project, I am receiving this error: [07:18:19] Error: ModuleBuildError: Module build failed (from…
Lala
  • 378
  • 3
  • 15
2
votes
0 answers

After setting up Tailwind in Angular, global scss variable imports no longer works

My objective is to configure Tailwind in an existing Angular project, with Material and scss. I have followed this guide, and most things seem to work. However in the project we have a variables.scss file, with multiple variables defined…
DauleDK
  • 3,313
  • 11
  • 55
  • 98
2
votes
0 answers

Cant resolve error when using CSS composes with an external monorepo package

I have a React app, in a mono-repo. I have created a utility package for reusable CSS (@monorepo/theme), and from my react app I would like to compose a css rule from the theme package. An example of what I'm trying to do is found…
gazzwi86
  • 1,019
  • 1
  • 15
  • 35
2
votes
1 answer

Webpack Compilation with Postcss fail because not find scss file in library in node_modules

This is my project structure: node_modules dist config - webpack.common.js - webpack.dev.js - webpack.prod.js - webpack.test.js src - app - app-routing.module.ts - app.component.html - app.component.scss - app.component.ts …
2
votes
0 answers

CssSyntaxError Unknown Word when building with webpack but dev server is running perfectly

I'm New To Vue and Webpack The project is running on my development server, works well when i run npm run dev But When i run npm run build The Following Error is generating Error processing file:…
2
votes
0 answers

How to load a postcss plugin after css is scoped by vue's style-post-loader

I am writing a postcss plugin intended to be used in a vue.js project. This plugin needs to run after vue-loader has processed the css and added any scoped id's to the selectors. Is there a way with vue.config.js, or some other way, to specify the…
ParkerD
  • 1,214
  • 11
  • 18
2
votes
0 answers

postcss-extract-media-query plugin is invalid

I'm trying to extract some media queries from my css bundles, but unfortunately plugin is not working. ERROR in ./node_modules/css-loader!./node_modules/postcss-loader/src!./node_modules/jscrollpane/style/jquery.jscrollpane.css Module build…
alexlz
  • 618
  • 1
  • 10
  • 24
2
votes
1 answer

Use Postcss with Vuepress

I'm trying to use Postcss plugins with my Vuepress custom theme, but I can't get it to work. Vuepress' documentation is extremely vague and anything from postcss-loader works. Can someone please tell me how to use it?
Nil Vila
  • 59
  • 4