search

TrySound / postcss-easy-import

PostCSS plugin to inline @import rules content with extra features
MIT License
200 stars 25 forks source link

Unclear how to setup imports #17

Closed dschinkel closed 7 years ago

dschinkel commented 7 years ago

I'm not completely sure how to do this right.

I've got a script that uses sugarss to outpout a .css file from an .sss file. So after installing postcss-reasy-import (npm i -D postcss-easy-import), running postCSS using sugarCSS I get the following:

/src/css/main.sss
/src/css/main.css  - what postcss outputted after running my postcss using sugarass npm script.

Trying to now figure out how to use postcss-easy-import to import my .css file that sugarss generated into my inde.html:

index.html


<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    @import "./src/css/main.css"

...

I think I need to specify an extension? It says it defaults t css...so if I'm using sugarss but I'm trying to import a css file I assume I don't need to specify an extension since I'm importing a css file! right?

When I run this though I get the literal value @import "./src/css/main.css" printed to the page when I load my index.html page.

So stuck here.

simonsmith commented 7 years ago

The @import statement has to be used within CSS to work correctly. The best way to solve this is to link to your built CSS file with <link> in the index.html document.

<link rel="stylesheet" href="./src/css/main.css">
dschinkel commented 7 years ago

ah yea right. I tried doing but it hasn't worked, let me fiddle with it.

simonsmith commented 7 years ago

Just to clarify, postcss-import works as a plugin in your PostCSS build step, not after. So given a file like this:

index.css

@import "./some-file.css";
@import "./some-other-file.css";

The files would be retrieved and built into the resulting CSS file in order. This is not to be confused with the native @import statement found in the browser which fetches individual files with a network request at run time.

dschinkel commented 7 years ago

thanks. So if I want to import say another .sss into an .sss I have to tell it to look for .sss files using extensions? I don't see how to set that. Where and how would I tell it to look for .sss. What is the syntax or do I need a config file to specify that extension or can I add an option in my npm script? I'm using an npm script to run postcss btw..that outputs a css file based on my .sss file.

dschinkel commented 7 years ago

it's working didn't need to specify any extensions...