skip to Main Content

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


  1. 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:

    % cat plugged.scss 
    #plugged {
      @import 'content';
    }
    
    Login or Signup to reply.
  2. Great question!

    To import a regular CSS file into Sass you will need to remove the .css file extension.

    @import 'content'
    

    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:

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search