I am trying to include one file into another with sass import directive and wrote
% cat plugged.scss
#plugged {
@import 'content.css';
}
and I have simple
% cat content.css
body {
background-color: yellow;
}
Unfortunetely, when I do
% sass plugged.scss plugged.css
I get
% cat plugged.css
#plugged {
@import 'content.css';
}
I.e. imput is just copied to output without any processing. Shouldn’t it merge one file into another?
How to fix it and/or what I am missing?
Version is
% sass --version
1.43.4
I have removed filename extensions and it did something strange:
dims@raikron410 sass01 % ls content
content
dims@raikron410 sass01 % head -c 800 content
/*!
* Bootstrap v4.0.0 (https://getbootstrap.com)
* Copyright 2011-2018 The Bootstrap Authors
* Copyright 2011-2018 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/:root{--blue:#007bff;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8c;--red:#dc3545;--orange:#fd7e14;--yellow:#ffc107;--green:#28a745;--teal:#20c997;--cyan:#17a2b8;--white:#fff;--gray:#6c757d;--gray-dark:#343a40;--primary:#007bff;--secondary:#6c757d;--success:#28a745;--info:#17a2b8;--warning:#ffc107;--danger:#dc3545;--light:#f8f9fa;--dark:#343a40;--breakpoint-xs:0;--breakpoint-sm:576px;--breakpoint-md:768px;--breakpoint-lg:992px;--breakpoint-xl:1200px;--font-family-sans-serif:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji",%
dims@raikron410 sass01 % cat plugged4.scss
#plu {
@import 'content';
}
%
dims@raikron410 sass01 % cat plugged4.scss
#plu {
@import 'content';
}%
dims@raikron410 sass01 % sass plugged4.scss plugged4.css
dims@raikron410 sass01 % cat plugged4.css
#plu body {
background-color: yellow;
}
/*# sourceMappingURL=plugged4.css.map */
What is happening? Where did it take yellow
????
2
Answers
I think this is because you are importing a
.css
-file into Sass.Get rid of the css.-extension when importing these kind of files:
Great question!
To import a regular CSS file into Sass you will need to remove the .css file extension.
The Sass official documentation states this here with an example, under "Importing CSS": Sass Documentation
Here is a screenshot of it from the Sass Documentation: