0

Was looking through this solution:

https://github.com/medialize/sass.js/

And after much trial and error I got it to work when converting a scss string that looks something like this:

var testScss1 = '$testColour1: #ff0000' + 
'.box { color: $testColor1 }';

var sassWithVariables = new Sass();

sassWithVariables.compile(testScss1, function (result) {
    // result.text is defined and converts perfectly
});

But this example with an import to a file called _demo.scss, will not work and I want to throw my chair across the room!

var testScss2 = '@import "_demo";';

var sassWithImports = new Sass();

sassWithImports.compile(testScss2, function (result) {
    /*
    get this error:

    ERROR Error: file to import not found or unreadable: _demo
       Current dir: 
        on line 1 of stdin
   >> @import "_demo";
  */
});
Chester Rivas
  • 692
  • 7
  • 16
  • Was `_demo.scss` previously made available via `writeFile()`? The [docs](https://github.com/medialize/sass.js/) imply that this is required (per the "Working With Files" section). – Paul Roub Sep 14 '15 at 22:38
  • @PaulRoub not it was not. I tried it since I posted this. And that seems to register it. I thought writeFile for some reason would write to disk, which I didn't want to do. – Chester Rivas Sep 15 '15 at 14:32
  • Are you on OS X 10.11? I'm looking for a solution too: http://stackoverflow.com/questions/33045806/is-el-capitans-rootless-breaking-old-grunt-configs – beta208 Oct 15 '15 at 16:54

1 Answers1

2

As far as i understand sass.js, it creates a virtual sass-file : a variable in the DOM. It will not use a real file from your filesystem.

  • If you just want to use virtual files, all is documented on: https://github.com/medialize/sass.js/#working-with-files .
  • If you want to use a file from you filesystem, you have to make an ajax-call to get the file. When that's done, you can place it in the virtual file and run sass.js

This is how to do it:

  1. Your server doesn't know the mime-type of .SCSS and .MEM, so you'll have to state it.
    On a windows-server, you can do it in your web.config (in the root of your folder) like this: 

    <?xml version="1.0"?>
<configuration>
  <system.web>
    <compilation debug="true" targetFramework="4.0"/>
  </system.web>
<system.webServer>
      <staticContent>
         <mimeMap fileExtension=".mem" mimeType="application/octet-stream" />
         <mimeMap fileExtension=".scss" mimeType="text/css" />
      </staticContent>
   </system.webServer>
</configuration>

    I don't know how to do it on other environments, but i'm sure it won't be too hard to find.

  2. Write the javascript to get the file, and create it as a virtual file. The following code works with jquery 1.8.3 and you must run this on a server.
    In this example i'm getting 2 sassfiles instead of just one. I don't know what you want to do with the generated css, but i assume you want to put it somewhere on the page to affect your html. 

    var myexternalfileOne = ''; 
var myexternalfileTwo = ''; 
$( document ).ready(function() {
    $.when(
         $.ajax({
             url: "/sass/_utilities.scss", dataType: "text",
             success: function(data) {
                // the contents of the real file is now put into the empty var:
                 myexternalfileOne = data;
             }
         }),
         $.ajax({
             url: "/sass/_styling.scss", dataType: "text",
             success: function(data) {
                // the contents of the real file is now put into the empty var:
                 myexternalfileTwo = data;
             }
         })
     ).then( function(){
        // all files are loaded and put into vars. Finally, we initiate SASS.JS: 
         var sass = new Sass();
         sass.writeFile('_virtualfileOne.scss', myexternalfileOne);
         sass.writeFile('_virtualfileTwo.scss', myexternalfileTwo);
         sass.compile('@import "_virtualfileOne"; @import "_virtualfileTwo";', function(result) {
             // SASS.JS has created css out of the sass-files from your filesystem. 
             // If we want it to affect our page, we just put it somewhere, in this case, we put it before a div#uniqueid
             $('div#uniquediv').prepend('<style>' + result.text+ '</style>'); 
         });
     });
});
WouterLemoine
  • 93
  • 5