Questions tagged [postcss-import]
38 questions
12
votes
1 answer
Error: Loading PostCSS Plugin failed: Cannot find module 'postcss-import' (Vue 2)
I create my first npm package. I published it on npmjs and encountered the error of the lack of the 'postcss-import' module after installing the package in the project and running it. Tell me, where and in which file may the problem be? I tried all…
AgainstTheSun
- 121
- 1
- 1
- 4
9
votes
1 answer
Importing global css custom variables
I'm trying to use webpack with postcss to import a theme-variables.css file that contains my css custom variables.
//theme-variables.css
:root {
--babyBlue: blue;
}
Basically I want any css that imports theme-variable to be able to access these…
Reed
- 357
- 2
- 4
- 10
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,
…
chocobuckle
- 89
- 6
5
votes
1 answer
Add tailwindcss v1 to a basic react-static site using postcss-import
I am trying to set up a starter for a react-static site including tailwindcss v1 and postcss-import. I cannot get the build or start processes to resolve the @import "tailwindcss/xxx" directives. I get the same outcome with tailwindcss v0.7.4
This…
nbtech
- 51
- 5
4
votes
0 answers
Error: Could not resolve the styleName 'x' with babel-plugin-react-css-modules and postcss-import
The Issue
Recently I have switched from the deprecated react-css-module to babel-plugin-react-css-modules to use CSS Module in a React project and encountered the issue that it is not able to resolve the style declaration in the CSS file imported…
codeful.element
- 242
- 2
- 7
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
4
votes
2 answers
PostCSS css-next - global variables without having to use @import
I have a file variables.css with CSS variables inside a :root{}
Right now each time I need to use it in another .css file I use:
@import './path/to/variables.css'.
I want to know if there is a way to have variables.css available globally without…
sandrina-p
- 3,794
- 8
- 32
- 60
3
votes
3 answers
Nested syntax with PostCSS for :hover and :focus
I'm using TailwindCSS and PostCSS and I have this css code:
.btn {
@apply py-1;
@apply px-4;
@apply border;
@apply rounded;
}
.btn:hover {
@apply bg-white text-black;
}
.btn:focus {
@apply bg-black text-white;
}
Is there a native way…
Fred Hors
- 3,258
- 3
- 25
- 71
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
2 answers
Should Normalize.css be kept as separate file or compiled (through postcss @import) into the final "styles.css" file?
In terms of performance/speed of the final product and according to the best practices - should Normalize.css be kept as separate file (linked from HTML head) or is it better to compile it into the final .css file?
I was searching here and on many…
nemanja
- 664
- 5
- 16
2
votes
1 answer
`@apply` cannot be used with `` because `.` either cannot be found... Tailwind
I am using tailwind with laravel mix and postcss. I get the error:
@apply cannot be used with .text-grey-default because .text-grey-default either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If…
Alek Devetak
- 49
- 1
- 4
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
…
German Quinteros
- 1,870
- 9
- 33
2
votes
1 answer
PostCss Modules and next.js
I am using PostCSS http://cssnext.io/ with my Next.js website combined with butterCMS. I am new to postcss but like what they are trying to do, however coming from a SASS background, I am finding it seems to be going down the rabbit hole of having…
HGB
- 2,157
- 8
- 43
- 74
1
vote
1 answer
TailwindCSS nesting not working with postCSS config
I am trying to scope tailwind styles and I am using this postcss config from Tailwind docs:
module.exports = {
plugins: {
'postcss-import': {},
'tailwindcss/nesting': {},
tailwindcss: {},
autoprefixer: {},
}
}
and here is my…
Peter Wilson
- 4,150
- 3
- 35
- 62
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