Question

正在寻找这个解决方案：

经过多次试验和错误后，我在转换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文件：DOM中的一个变量。它不会使用文件系统中的真实文件。

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

这是怎么做的：

您的服务器不知道.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>

我不知道如何在其他环境中这样做，但我相信它不会太难找到。

编写javascript以获取文件，并将其创建为虚拟文件。以下代码适用于jquery 1.8.3，您必须在服务器上运行它。
在这个例子中，我得到2个sassfiles而不是只有一个。我不知道你想用生成的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>'); 
         });
     });
});

Sass.js @imports Don不工作

1 个答案: