2

The Sass team seems to have removed this capability in Sass 3.4 but Im trying to namespace the Semantic UI CSS library so as not to conflict with other libraries and its not working.

.semantic-namespace {
@import "semantic-ui-css/semantic.min.css";
}

and Im getting this error

error sass/semantic-namespace.scss (Line 3: CSS import directives may only be used at the root of a document.)

It seems to be saying I can only use @import at the top.

Found some docs from years ago but I think theyre too old and something has changed.

Salvatore
  • 1,435
  • 1
  • 10
  • 21
Leon
  • 5,701
  • 3
  • 38
  • 38

1 Answers1

3

Name your inner file with an underscore, and ending in scss. .Yes, even if it's plain css, i.e. semantic.min.css → _semantic.min.scss

Have an outer File like so:

#main .content {  // if that's, where you want them to rule only
    @import 'semantic.min';
}

To cut the long story short, the syntax in next:

to import (include) the raw CSS-file the syntax is without .css extension at the end (results in actual read of partial s[ac]ss|css and include of it inline to SCSS/SASS):

@import "semantic.min";

to import the CSS-file in a traditional way syntax goes in traditional way, with .css extension at the end (results to @import url("semantic.min.css"); in your compiled CSS):

@import "semantic.min.css";

And it is damn good: this syntax is elegant and laconic, plus backward compatible! It works excellently with libsass and node-sass.

JMF
  • 1,083
  • 7
  • 17
  • Where are you using underscored name? How did you overcome an error if you are still using import inside `{}`? – Dims Oct 28 '21 at 17:03