[英]Sass.js @imports Don't Work
Was looking through this solution: 正在查看此解决方案:
https://github.com/medialize/sass.js/ 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: 经过多次试验和错误后,我将其转换为如下所示的scss字符串时可以使用:
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! 但是此示例导入了一个名为_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";
*/
});
As far as i understand sass.js, it creates a virtual sass-file : a variable in the DOM. 据我了解sass.js,它会创建一个虚拟的sass-file:DOM中的一个变量。 It will not use a real file from your filesystem.
它不会使用文件系统中的真实文件。
This is how to do it: 这是怎么做的:
Your server doesn't know the mime-type of .SCSS and .MEM, so you'll have to state it. 您的服务器不知道.SCSS和.MEM的MIME类型,因此您必须声明它。
On a windows-server, you can do it in your web.config (in the root of your folder) like this: 在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>
I don't know how to do it on other environments, but i'm sure it won't be too hard to find. 我不知道如何在其他环境中执行此操作,但是我敢肯定它不会太难找到。
Write the javascript to get the file, and create it as a virtual file. 编写JavaScript来获取文件,并将其创建为虚拟文件。 The following code works with jquery 1.8.3 and you must run this on a server.
以下代码适用于jquery 1.8.3,您必须在服务器上运行它。
In this example i'm getting 2 sassfiles instead of just one. 在这个例子中,我得到了2个sassfile,而不是一个。 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.
我不知道您想对生成的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.