Kevin Powell - Community•8mo ago

Postcss @import not returning content of the files.

My output file returns '@import 'files'' instead of the content of the files. I don't know what I'm doing wrong. I've tried changing files paths, still getting same output. But when I link 'main.css' to my html head, the content in the file reflects on my work. postcss.conf.js - module.export = { plugins: [ require('postcss-import'), ] } package.json - "scripts":{ "postcss:watch": "postcss assets/
main.css --dir public" }, main.css (which is in the same file directory as css (assets) - @import 'css/screen.cc';
@import 'css/ custom.css'; @import 'css/style.css'; Output when I run 'npm run postcss:watch' is public/main.css - @import 'css/screen.cc'; @import 'css/ custom.css'; @import 'css/style.css';

16 Replies

Kevin Powell•8mo ago

It's looking for an index.css file by default.

Bless😇•8mo ago

@Kevin Thank you Sir. I was able to resolve it later on. Though it took me a while to identify my mistake. @Kevin sorry to ask Sir, have you ever tested your work on uc browser (desktop version)? how did you get it to render properly? Some css property is not supported. Ones I've come across for now is "grid, margin-block, and clamp" translate property is giving something else entirely. What do you suggest I do?

Kevin Powell•8mo ago

What are they giving you? Are you also using preset-env?

Bless😇•8mo ago

@Kevin the whole thing is scattered. The display in mobile version is ok but not as good as what I have in chrome and few other browsers. I'm not using preset-env, cos I'm not conversant with it. Truth is I'm a completely novice😃. I'm following your classes to handle the css part of what I'm working on @Kevin if it's ok with you and it's not against your rules, I would really love you to see the project when I'm done. I'm working on an e-commerce website.

Kevin Powell•8mo ago

The reason I asked if you're using preset-env is that will change some things, like margin-block. If it's changing your code, could you post what you put in, and what it's outputting?

Bless😇•8mo ago

I'm using preset-env. but I didn't add stage config. my setup.

const postcssPresetEnv = require('postcss-preset-env');
  'postcss-preset-env': {},

const postcssPresetEnv = require('postcss-preset-env');
  'postcss-preset-env': {},

can't remember where I added

margin-block

margin-block

at the moment. css that has the translateX property

.item1 form input[type="text"] {
    width: 8rem;
    padding: .2rem .6rem;
    border: none;
    border-radius: 8px;
    background: var(--secondary-color);
    box-shadow: 1px 1px 0px rgba(0,0,0,0.4),
    inset 0 0 0.3rem 0 var(--secondary-color),
    0 0 .3rem 0 var(--secondary-color);
    transition: ease-in-out 2s;
}

.item1 form::before{
  content: "";
  position: absolute;
  background: blue;
  border-color: var(--clr);
  top: 18px;
  left: 0;
  width: 100%;
  height: 50%;
  transform: perspective(10rem) rotateX(40deg)
  scale(1, 0.35);
  filter: blur(1rem);
}

#search-icon {
    width: 1rem;
    position: absolute;
    margin-top: 3%;
    transform: translateX(-20px);
  }

.item1 form input[type="text"] {
    width: 8rem;
    padding: .2rem .6rem;
    border: none;
    border-radius: 8px;
    background: var(--secondary-color);
    box-shadow: 1px 1px 0px rgba(0,0,0,0.4),
    inset 0 0 0.3rem 0 var(--secondary-color),
    0 0 .3rem 0 var(--secondary-color);
    transition: ease-in-out 2s;
}

.item1 form::before{
  content: "";
  position: absolute;
  background: blue;
  border-color: var(--clr);
  top: 18px;
  left: 0;
  width: 100%;
  height: 50%;
  transform: perspective(10rem) rotateX(40deg)
  scale(1, 0.35);
  filter: blur(1rem);
}

#search-icon {
    width: 1rem;
    position: absolute;
    margin-top: 3%;
    transform: translateX(-20px);
  }

Bless😇•8mo ago

also check the

::before

::before

style rendering in UC browser. the icons are not displaying in the same position as firefox because UC doesn't support

grid

grid

properties.

Kevin Powell•8mo ago

If you have preset-env setup, it's going to make changes. Any postcss plugin is going to have defaults, including preset-env, which I think defaults to stage 2 by default. It means if you use margin-block, it'll turn that into margin-top and margin-bottom. The changes it makes should have no impact on the final result, it'll just look a little different, but with better browser support. As for grid, if you need it to work in UC, then you can't use grid, not much you can do there. Do you really need it working in UC though?

Bless😇•8mo ago

@Kevin I find it easier to work with grid than flexbox. Personally I don't care much about UC but my fear is the impression the output will create if that <1% user visits the site. Cos the rendering will definitely not be pleasing

Kevin Powell•8mo ago

What countries are visiting your site (or do you hope to be visiting your site)? If you're worried about North America + Europe, I'm not even sure UC would hit .2% of users. You'd have more people on IE probably. The only places where use of UC is going to be above 0.5% is Africa and Asia. afaik, China is the only country where it has meaningful useage

Bless😇•8mo ago

@Kevin I'm not targeting a specific country. I'm a Nigerian. So it won't be surprising if majority of my visitors are from Africa

Kevin Powell•8mo ago

Still might not be an issue, but if it is, the only real choice is not to use grid 🤷

Bless😇•8mo ago

@Kevin 😄 which is nearly impossible not to. Maybe I'll work on a fallback when I'm done. why does 'height: 100vh;' add vertical scroll even when the content is not much? I've tried '100% and max-height:100dvh', none is taking up the whole viewport.

Bless😇•8mo ago

@Kevin the mobile version is ugly. It sent the whole thing downward.

Kevin Powell•8mo ago

body { margin: 0; } ?

Bless😇•8mo ago

@Kevin yes, done that already

Gaming

Programming

Postcss @import not returning content of the files.