[英]Sass.js @imports Don't Work
正在查看此解決方案:
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";
*/
});
據我了解sass.js,它會創建一個虛擬的sass-file:DOM中的一個變量。 它不會使用文件系統中的真實文件。
這是怎么做的:
您的服務器不知道.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個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>'); }); }); });
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.