Why import just can use top file css năm 2024

@xzyfer is right that we need the implementations to match for default behavior. If they don't, a sass file will stop being portable across implementations (if a sass file developed on node-sass imports a css file, even sans extension, that file won't work in other implementations).

But, it is ok as an optional feature that defaults to false. So node-sass can be perfectly compliant as a Sass implementation if it decides to provide a configuration option to enable css imports as long as it respects the documented rules about what causes an @import to become a pure css-based import. Then sass authors know when they are depending on a feature that is non-standard and requires some additional set-up.

In the long term, libSass should add a parser mode that imports css files without parsing them with any additional Sass syntax or semantics. this will ensure forward compatibility with CSS if it ever changes in a way that collides with a Sass enhancement. Such changes do not arrive unannounced, so there is ample time to build this and roll it out with appropriate deprecation warnings.

SASS shouldn't have used @import to mean something different to what CSS @import means. They should have used a different keyword to inline imports vs network request.

We agree. Sass 4 will deprecate @import in favor of @use and Sass 5 will return @import to CSS with no overloaded meaning.

Node-Sass shouldn't have allowed @import of CSS files to be inline

Technically, it's a libSass thing. But I agree. I gave hampton a piece of my mind about this quite some time ago ;)

Personally, I think the easiest way to mitigate this would be to have one extra npm module that we have to install when we upgrade to the new node-sass

Adding eyeglass to your node-sass project adds a custom importer that by default allows all imports without an extension to resolve to css files. Plain CSS files are parsed as scss syntax.

Eyeglass also makes it easy to import from node_modules if an npm package is configured as an "eyeglass module" or if you manually configure your project to describe the layout of those node packages that are not specifically designed to work with eyeglass.

Eyeglass is a bit heavy-weight for this single use-case, but it exists now and adds a lot features and useful functionality for distributing Sass files as npm modules. I built it as the successor to Compass, with a focus on helping the community collaborate.

I am new and trying to understand the cascading thing. I tried to add a rule to the style.css file at the bottom, but then noticed a rule in the import-styles file was overriding it. The import-styles.css file is called with @import at the top of the style.css file. I thought that the rules made at the bottom of external style sheets take precedence. could someone explain this to me? Thanks so much!

6 Answers

The problem with using @import is that it affects page load times and you can run into problems with style sheets not loading correctly, causing issues like you are experiencing (style.css not overwriting defaults from normalize.css). Link them both in the order that you need in the of your html, that will fix your problem for you. Goodluck!

The file which you reference first will take precedence.

So if you do

Then your own custom styles will override normalize.min.css.

However, if you do,

Then normalize.min.css will override your custom styles.

For this reason you always want to put noramlize.min.css first

In the HTML file, you also have to take into account which CSS file is being referenced first. It sounds like your styles.css is above your normalize.css in your HTML file. It should be below so that it overwrites what you want it to over normalize.css.

MOD

Hey Casey,

It will depend on where you load the stylesheet in your HTML. If you include the 'normalize.css' after your main stylesheet in the HTML, then the 'normalize.css' will override your styles. How they are added affects the cascade as well.

You seem to understand the cascading effect, just remember that the cascade also applies to how/when the files are included into the HTML and not just in the stylesheet.

Hope that helps.

Don't use @import in your HTML. Use link rel.

Hm. Try importing your style.css into your normalize.css file then. I'm not sure which one you put in which.

Does the order of CSS imports matter?

CSS Order Matters In CSS, the order in which we specify our rules matters. If a rule from the same style sheet, with the same level of specificity exists, the rule that is declared last in the CSS document will be the one that is applied.

Why to use @import tag at the top of a CSS file?

The @import rule allows you to import a style sheet into another style sheet. The @import rule must be at the top of the document (but after any @charset declaration). The @import rule also supports media queries, so you can allow the import to be media-dependent.

Can I use import in CSS file?

The @import CSS at-rule is used to import style rules from other valid stylesheets. An @import rule must be defined at the top of the stylesheet, before any other at-rule (except @charset and @layer) and style declarations, or it will be ignored.

Why is imported an easy way to insert the file in CSS?

The import rule allows you to import files with four different types of media settings: print, screen, speech, and all. By using an import rule, you may also insert a CSS file into an HTML document. The import rule allows you to style items in a separate CSS file before importing them into an HTML document.