Sass.js @imports不起作用

Question

正在查看此解决方案：

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

经过多次试验和错误后，我将其转换为如下所示的scss字符串时可以使用：

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

var sassWithVariables = new Sass();

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

但是此示例导入​​了一个名为_demo.scss的文件，因此无法正常工作，我想把椅子扔到整个房间里！

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";
  */
});

Answer 1

据我了解sass.js，它会创建一个虚拟的sass-file：DOM中的一个变量。 它不会使用文件系统中的真实文件。

• 如果您只想使用虚拟文件， 请参见 ： https : //github.com/medialize/sass.js/#working-with-files 。
• 如果要使用文件系统中的文件，则必须进行Ajax调用才能获取文件。 完成后，您可以将其放置在虚拟文件中并运行sass.js

这是怎么做的：

1. 您的服务器不知道.SCSS和.MEM的MIME类型，因此您必须声明它。
   在Windows服务器上，您可以在web.config（文件夹的根目录）中执行以下操作：

    <?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> 

   我不知道如何在其他环境中执行此操作，但是我敢肯定它不会太难找到。

2. 编写JavaScript来获取文件，并将其创建为虚拟文件。 以下代码适用于jquery 1.8.3，您必须在服务器上运行它。
   在这个例子中，我得到了2个sassfile，而不是一个。 我不知道您想对生成的CSS做什么，但是我假设您想将其放在页面上的某个位置以影响您的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>'); }); }); });