Sass.js @imports 不起作用 [英] Sass.js @imports Don't Work
问题描述
正在查看此解决方案:
https://github.com/medialize/sass.js/
经过多次试验和错误后,我在转换如下所示的 scss 字符串时开始工作:
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
});
但是这个导入名为 _demo.scss 的文件的示例不起作用,我想把椅子扔到房间对面!
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";
*/
});
推荐答案
据我了解 sass.js,它创建了一个虚拟 sass 文件:DOM 中的一个变量.它不会使用您文件系统中的真实文件.
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.
- 如果您只想使用虚拟文件,所有内容都记录在:https://github.com/medialize/sass.js/#working-with-文件.
- 如果要使用文件系统中的文件,则必须进行 ajax 调用以获取该文件.完成后,您可以将其放置在虚拟文件并运行 sass.js
这是如何做到的:
您的服务器不知道 .SCSS 和 .MEM 的 MIME 类型,因此您必须说明.
在 Windows 服务器上,您可以在您的 web.config(在您的文件夹的根目录中)中执行此操作:
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.
编写javascript来获取文件,并将其创建为虚拟文件.以下代码适用于 jquery 1.8.3,您必须在服务器上运行它.
在这个例子中,我得到了 2 个 sassfiles 而不是一个.我不知道你想用生成的 css 做什么,但我假设你想把它放在页面上的某个地方来影响你的 html.
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>');
});
});
});
这篇关于Sass.js @imports 不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!