Koala ошибка utf 8 - Исправление ошибок и поиск оптимальных решений проблем

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

Comments

Koala 2.2.0

I recently upgraded to 2.2.0 and every time I try and compile from SCSS files I get the following errors:

style.scss
ArgumentError: invalid byte sequence in UTF-8
Use —trace for backtrace

This does not happen with javascript files.

I have tried multiple different compiling options from nested all the way to compressed. I have added @charset «utf-8»; to the top to see if that would help, but it does not. I also ensured all of my files were set to be «utf-8»; I still get that error.

What can I do to help you figure this one out! I swear this is not like the last time!!!

I also did not do a full install I just did an upgrade. Just wanted to make sure you had all the information.

Can you try to replace each of the lines 74 and 197 of the file ...KoalaappscriptcompilesSassCompiler.js with command.push('-E UTF-8');?

I don’t know if it will fix the problem but it might.

I changed both of those lines and still received the same error.

I have tried multiple files and even changed the file encoding inside of IntelliJ to make the files UTF-8 encoded; alas, none has worked.
I then opened one of the files in Notepad++ and forced the encoding there to be UTF-8, even though that file was already showing as UTF-8 (I resaved it to be sure), and still I get the same error.

What else can I do for you? I am willing to help out in anyway possible.

Are you importing any third-party files in any of your files?
If so are they UTF-8 encoded?

I am not. The only thing imported into my scss files are other scss I wrote. No third party injection at all.

It also was NOT an issue on the previous version I was using.

Can you send me a file (as is not it’s contents) that will cause this problem? (so I can reproduce it)
And in the mean time you can remove both lines 74 and 197 of the file ...KoalaappscriptcompilesSassCompiler.js to fix the problem.
Oh and which OS are you using?

Thanks

I will remove those lines and see what happens.

I am not sure what you mean by as is, but I can send you a file.

I am on Windows 10, developing with IntelliJ.

Usually sending the contents of code file is equivalent to the file (because the code is just text).
But in this case I’m asking for the actual file.
I think you can add it as attachment in the issues here, but it should be a .txt file otherwise Github wont accept it.

Oh I am with you. Ok, I will do that. I will use the actual file instead of the file from bitbucket just in case something happens in the conversion.

In fact, I will put my local copy AND my bitbucket copy so you can test with both; not that it will matter, but it is at least another road to eliminate.

That would be great 😄, Thanks

我也出现同样的报错,错误信息如下
ArgumentError: invalid byte sequence in UTF-8
Use —trace for backtrace.
我同事就可以正常使用，他的版本是2.0.4 我是2.2.0

Hi! I’m having the same problem :((( Could you solved it? How???

Also didn’t have this problem with previous versions… i’ve just updated to 2.2.0

I’ve just realized that the problem was that i was working on flies located in google drive, and i don’t know why this is a problem, but I moved my folder with all the files to the desktop of my pc and now the error is gone!! Just sharing in case it is useful for someone! bye

找到问题所在了文件夹目录必须是英文，不能有中文，就旧版本是可以的

Google Translate
Find the problem where the folder directory must be in English, can not have Chinese, the old version is possible

That was the same issue I was having before I put in your temp fix. My files were all local and had nothing to do with a shared drive. I am still unsure how the error is occurring as IntelliJ is setting the encoding to UTF-8; I even verified that with Notepad++.

Regardless, I did use your temp fix and I am using 2.2.0 flawlessly.

The issue has to do apparently with non UTF-8 characters in the project path. For example, my project was located inside a folder that had the «ñ» character, and when I changed it to a more normal path (C:/whatever/) it worked flawlessly. Maybe that’s not the actual problem, but that’s my guess.

GL.

Any updates on the issue? My project path is C:UsersDanDropboxZalohySchoolVŠBVIAProjekt and I’m getting the same error.

@chylex Sorry nothing yet but it’s the next thing on my list.
I’m on a mac and using a VM to run windows so it’s a bit difficult for to work on this.
And the handling of UTF-8 characters in paths on windows is awful.

Hi !
I have the same on win10, for any path (I tried a dummy scss file in C:/test, and have the same error).
However my user path is C:UsersLoïc, and I can see koala is storing some stuff in C:UsersLoïc.koala. Maybe something here?
Anyway, I can successfully use it on other stations

after the change of the user in the name of which the Latin alphabet — the problem disappeared

I also have this problem. I changed my username characters to the latin alphabet, but this doesn’t work. Also I noticed that if checked ‘Compass mode‘, this problem gone, but there is appears other problem: ‘stylesheets must be in sass directory‘. And if I move stylesheets to sass folder, it works without problems. But in work projects this a little uncomfortable (because the stylesheets folder may be named ‘scss’ or other name); I hope you will fix this two bugs.

Koala v2.3.0. OS Windows 7 32bit service pack 1

@NelGarbuzova the other problem you faced is AFAIK a requirement for Compass

@zaygraveyard thank you. And I find settings for sass folders in koala settings. But without compass mode first problem still apears

I have the same problem with windows 10, «ArgumentError ; invalid byte sequence in UTF-8 Use—trace for backtrace» On Mac Os this problem with same folder doesn’t appear.

I’m getting the same error on Koala v2.3.0 on Windows 10 x64!
I just used them in default configuration like ‘Auto Compile’ and ‘Source Map’, so I’m not using compass option.

Hi,
I’ve got the same problem. my problem was the name of the directory (C:UsersLuciano.NerdDesktopblog_otoño_2018blog_(edit) ).

The problem is the letter Ñ. I just premove it.

I think your problem is similar:
• C:UsersLoïc
► Try with C:UsersLoic
• C:UsersDanDropboxZalohySchool VŠB VIAProjekt
► Try with C:UsersDanDropboxZalohySchool VSB VIAProjekt

Hi @luabfr
Yes the problem in my case is for sure the ï letter.
The thing is that Loïc is my username, and this folder is managed by windows, so I cannot (/ don’t know how to) modify it easily. I tried changing my windows username, but it kept the old folder name.
So my only option there would be to create another account and switch between to use Koala… a bit to much for me!

I’ll pick my window username more carefully next time

@lduhaut I don’t know if it works but its worth trying:

Create a link (using MKLINK in cmd) from your project(s) folder to somewhere safe (without unicode characters)
Add the newly created link to Koala

Or move your project(s) folder to somewhere safe and link it the other may around (from new path to old path)

@zaygraveyard thanks for the command, didn’t know about it.

However, in my case, my project is not under C:UsersLoïc. What I said is that I think Koala is storing things under the user profile (that is C:UsersLoïc.koala folder).
So is there any way to configure Koala not to use the user profile folder (If this is the issue, because all these are assumptions for now)

@lduhaut I don’t think this folder is affected by this bug. It’s just for the SCSS and Compass compilers

@zaygraveyard My problem is about SCSS compiler. In the first time, I placed my project under C:UsersLoïcmyproject, hit the scss compile button, and had the same exact error message (that is :
C:UsersLoïcmyprojectcssstyle.scss
ArgumentError: invalid byte sequence in UTF-8
Use —trace for backtrace
)

Then I tried to move my project under C:test, and still have the same error :
C:testmyprojectcssstyle.scss
ArgumentError: invalid byte sequence in UTF-8
Use —trace for backtrace

So having the same error, I looked where I could have special characters related to Koala, and only found this folder : C:UsersLoïc.koala (which has an empty ‘compilers’ folder). So, now way that this is linked?
Is there any place where logs are generated, so I could be sure it is not? And if not, you might want me to create a separate issue?

Just to complete my previous post, I just tried to:

create another window account, with ‘loduhaut’ as a nickname, instead of ‘Loïc’
On this account, use the same exact installation, add the same exact project under C:test, and hit compile
-> works fine.

So I can’t tell if this is the same issue, but I conclude there is a compiling issue linked to the user profile path under windows.

To go further, I did compare the contents of C:UsersLoïc.koala and C:Usersloduhaut.koala
And in the latter, there is a imports.json file that is generated, and that does not exist in the first one. There is also a new ‘cache’ folder in the second case.
So it looks like, on the scss compilation, Koala tries to create these files, and is not able to (probably because of the ï char of this path).

What do you think?

@zaygraveyard

So adding something like
if (!fs.existsSync(exports.userCacheDir)) { fs.mkdirSync(exports.userCacheDir); }
in FileManager.js might be enough for my case?

(I’m trying to reproduce it locally, but for now struggling to have ruby and all gems correctly installed …)

Edit: No, as I already tested adding it manually. It’s only a proof it uses this folder.

@zaygraveyard I successfully ran it from the sources. However, the command with the special character works well in source mode …
C:testkoalasrcrubybinruby -E UTF-8:UTF-8 -S «C:testkoalasrcbinsass» «C:testmyprojectcssstyle.scss» «C:testmyprojectcssstyle.css» —load-path «C:testmyprojectcss» —style nested —cache-location «C:UsersLoïc.koalacache.sass-cache»

So, not able to reproduce :/

@lduhaut AIR, last time I checked this problem I found that there’s something weird happening when nodejs execs a ruby command with non-ascii arguments.
Unfortunately I don’t have a windows but on hand to do more tests 😞

I would also like to point out that I am having the issue from path ‘C:xampphtdocsprojectscss’.

I have no non-ascii characters and I have no filenames that include non-ascii characters. The only non-alphabetical character is the hyphen in my filenames. For example, ‘page-one.scss’.

I hope that helps in the continued troubleshooting.

I am going to upgrade to 2.3.0 and see if I have any issues. If I do, I will apply the original fix that was given to me by removing both lines 74 and 197 of the file …KoalaappscriptcompilesSassCompiler.js to fix the problem. I will let everyone know of my outcome.

With the upgrade to 2.3.0 I am still receiving the same error:
ArgumentError: invalid byte sequence in UTF-8
Use —trace for backtrace

After commenting out lines 74 and 197 of ‘…KoalaappscriptscompilersSassCompiler.js’ I am now working without issue.

I hope this helps, but doubtful as this is the same outcome as the when this bug was opened.

Let me know if I can help!

@zaygraveyard

Unfortunately I don’t have a windows but on hand to do more tests 😞

If there’s something I can do to help …

Alternatively, would it be possible to check another custom environment variable (i.e. KOALAUSERDATA or something)? If exists, use it, else use the system ones? That’s not pretty, but that would prove the origin of this problem, and allow a workaround for people who cannot easily change their username

Can anyone verify @lucas201’s solution?

Does not work

Try to solve the problem by changing the username to Latin letters. You need to enter the main administrator, change the account name, then rename the folder to C: / User / …, then rename it in the registry: HKEY_LOCAL_MACHINE SOFTWARE Microsoft Windows NT CurrentVersion ProfileList
there, search for a folder with the user whose name you want to change. To me, it helped. Good luck. Sorry for the English.

I’m working on some network storage which looks like this:
\ntfilefreigabenrisprojekt2018 Betrieb für Sozialdienste BozenCSS + JSSGVindiv

I guess it’s a problem with spaces in folder names and / or +, -, _ and so on.

Ran into the same problem and this thread solved it for me. On Windows 10 I had the character «Ø» in my account. All I did was create an new admin account named «test», ran Koala and tested the compiler there — it worked. Logged back on to the original account and stuff suddently worked there aswell.

I my case the problem was in non ASCII chars in my USER_HOME folder. Because Koala stores it’s cache, logs and settings in USER_HOME/.koala.

I’ve solved the problem this way:

1. Shut down the Koala. Move USER_HOME/.koala to C:/Users/Default/docker/.koala
use any path that is free of non ASCII chars.

2. in file C:Program Files (x86)KoalaappscriptsFileManager.js

replace:
exports.userDataDir = path.join(process.env[(process.platform === ‘win32’) ? ‘USERPROFILE’ : ‘HOME’], (process.platform === ‘darwin’) ? ‘Library/Application Support/Koala/UserData’ :’.koala’);

with:
exports.userDataDir = ‘C:/Users/Default/docker/.koala’;

3. in file C:Program Files (x86)Koalaappscriptspageslog.js

replace:
var errorLog = process.env[(process.platform == ‘win32’) ? ‘USERPROFILE’ : ‘HOME’] + ‘/.koala/error.log’;

with:
var errorLog = ‘C:/Users/Default/docker/.koala/error.log’;

That’s it. Do not forget save you changes.

I figured out that you aren’t allowed to use special chars and / or umlauts like ä, ö, ü, ß.

Источник

Содержание

ArgumentError: invalid byte sequence in UTF-8 Use —trace for backtrace #696
Comments
Koala. Не компилируются файлы sass в css. Как исправить ошибку?
Compile problem UTF-8 #675
Comments
Koala. Не компилируются файлы sass в css. Как исправить ошибку?
Koala: простое решение для использования препроцессоров SASS и LESS
Возможности
Установка
Использование и настройки
Результат работы
Заключение

ArgumentError: invalid byte sequence in UTF-8 Use —trace for backtrace #696

Koala version

Bug report or feature request?

The text was updated successfully, but these errors were encountered:

Save your files with UTF-8 encoding for now. Koala probably should support ISO-1252 and similar as well.

I have just created new file «main.sass». I open it in Koala and it immediately shows me this message: ArgumentError: invalid byte sequence in UTF-8 Use —trace for backtrace. What’s wrong with it?

What encoding are you using? Both for main.sass and its references.

I just created two folders, SASS and CSS, and in SASS folder I created usual *.txt file and renamed it in main.sass, the file is empty, without any code. I open Koala, drag my SASS folder into, and immediately the error appears — «Save your files with UTF-8 encoding for now. Koala probably should support ISO-1252»
Interestingly, when I create file and name it with an extension «less», for example «main.less», empty file, and do the same action, drag and drop it into Koala, there is no any mistakes. It successfully works converting my less code into css. So what’s wrong with sass extension?

@TorvaldC That’s because this problem happens only with the SASS compiler.
BTW Does the path to the sass file contain any non-ASCII characters?

Sorry, the text of error in previous post is different it is — ArgumentError: invalid byte sequence in UTF-8 Use —trace for backtrace

No. I am aware of it can cause incorrect work of the program. So I always check the path to the file. But previously I worked only with less, and there were no problems at all. Yesterday I decided to try sass, and faced this problem.

This problem is, probably, because you have any non utf-8 chars in your «C:/user/[name]»
I’m changing mine now to test.

I had the same problem. I just solved it, changing my folder name, i used accent é. without it, it works 🙂

If you don’t want to change you home folder name, try this:

Shut down the Koala. Move USER_HOME/.koala to C:/Users/Default/docker/.koala
use any path that is free of non ASCII chars.

in file C:Program Files (x86)KoalaappscriptsFileManager.js

with:
exports.userDataDir = ‘C:/Users/Default/docker/.koala’;

in file C:Program Files (x86)Koalaappscriptspageslog.js

replace:
var errorLog = process.env[(process.platform == ‘win32’) ? ‘USERPROFILE’ : ‘HOME’] + ‘/.koala/error.log’;

with:
var errorLog = ‘C:/Users/Default/docker/.koala/error.log’;

another way I solved this trouble for russian language system and russian user name:
open windows control panel
1- find region & language;
2 — administrative language params;
3 — change system language;
4 — mark checkbox Use unicode (UTF-8);
5- reboot
6 — enjoy your coding!

p.s. soory for my language, i m just lerning)

another way I solved this trouble for russian language system and russian user name:
open windows control panel
1- find region & language;
2 — administrative language params;
3 — change system language;
4 — mark checkbox Use unicode (UTF-8);
5- reboot
6 — enjoy your coding!

p.s. soory for my language, i m just lerning)

Thanks! Worked for me great

关闭考拉。将USER_HOME / .koala移动到C：/Users/Default/docker/.koala
使用任何没有非ASCII字符的路径。
在文件C： Program Files（x86） Koala app scripts FileManager.js中

replace：
exports.userDataDir = path.join（process.env [（process.platform ===’win32’）？’USERPROFILE’：’HOME’]，（process.platform ===’darwin’）？’Library / Application Support / Koala / UserData’：’。koala’）;

with：
exports.userDataDir =’C：/Users/Default/docker/.koala’;

在文件C： Program Files（x86） Koala app scripts pages log.js中

replace：
var errorLog = process.env [（process.platform ==’win32’）？’USERPROFILE’：’HOME’] +’/。koala / error.log’;

with：
var errorLog =’C：/Users/Default/docker/.koala/error.log’;

another way I solved this trouble for russian language system and russian user name:
open windows control panel
1- find region & language;
2 — administrative language params;
3 — change system language;
4 — mark checkbox Use unicode (UTF-8);
5- reboot
6 — enjoy your coding!

p.s. soory for my language, i m just lerning)

This is like 3years later, but even so, thanks so much, i can now compile my SASS with Koala HAHAHAHAHA
Again, thanks so much 😀

another way I solved this trouble for russian language system and russian user name:
open windows control panel
1- find region & language;
2 — administrative language params;
3 — change system language;
4 — mark checkbox Use unicode (UTF-8);
5- reboot
6 — enjoy your coding!

p.s. soory for my language, i m just lerning)

Dude, your english is awesome, with your guide I solved this problem just in one minute when I was wondering about this issue for hours before, really thanks!

Источник

Koala. Не компилируются файлы sass в css. Как исправить ошибку?

Оценить 8 комментариев

ну так вы сделали, что вас попросила программа?
Use —trace for backtrace.

Делайте, и вывод сюда скидывайте. Тогда можно будет предметно показать в чем ошибка.

У меня все заработало после следующего гайда — (цитирую)
B настройки Win-10 ввести изменение: Параметры Windows > Время и язык > Язык > Административные языковые параметры > Нажать кнопку: Изменить язык системы > Поставить галочку: Бета-версия:. Использовать Юникод (UTF-8) для поддержки языка во всем мире.

И все заработало. Надеюсь, ты прокрутил до конца и увидел это сообщение. Я перепробовал все в этой ветке и помогло только это решение.

, через ruby , до установки коаллы и потом галка

Здравствуйте!
Изучил все ответы в данной ветке.
У меня похожая проблема, при попытке компиляции Koala выдаёт такую ошибку «ArgumentError: invalid byte senquence in UTF-8 Use —trace for backtrace».

Какие решения пробовал:
— размещать файлы проекта в корне локального диска, таким образом что бы весь путь состоял только из латинский символов». Ноль эффекта, компилятор выдаёт такую же ошибку.
— устанавливал другие версии Koala. В том числе рекомендуемую здесь версию 2.1.4. Ни одна из них кроме самой последней (2.3.0) не запустилась на моём ПК (OC Windows 10).

Включать поддержку кодировки UTF в системе не хочу. Причина в том, что как я прочитал в другом источники это ведёт к появлению ошибок в других программах и дополнениях. Например перестаёт запускаться плагин Open Server для VSCode.

Возможно кто-нибудь знает другие способы решения проблемы с восприятием кодировки у Koala?

Источник

Compile problem UTF-8 #675

Hi. I wanted to compile scss to css. I made test folder in which I have 2 folders scss and css. I made empty style.scss and style.css file. Then I put @charset «UTF-8»; in the beggining of style.scss file. I changed output path but still I get this error:

ArgumentError: invalid byte sequence in UTF-8 Use —trace for backtrace.

The text was updated successfully, but these errors were encountered:

I checked files in notepad++ and both are encoded in utf-8.

Duplicate of #648
Can you verify that the files are on your local machine and their path doesn’t contain non-ASCII chars?

I changed path to C:xampphtdocstestscss and it still doesn’t work

Is the «compass» option activated?

I changed it and now I have Individual stylesheets must be in the sass directory.

I’ll check it out tonight, can you give me the directory structure of the project and the contents of the files? (so I can reproduce it)

As I wrote I have one main folder named test and there are 2 folders inside — css and scss. Then in scss folder I have style.scss and in css folder I have style.css file. That’all, nothing more.

Ok great, thanks
I’ll let you know what I find

Sorry but I’m unable to reproduce it 😞

I’m on windows 10 home 64bit

I have the same problem

@zhaugahsarov I’m assuming you’re on Windows, which version?
And are you using the latest version of Koala (v2.3.0)?

@zaygraveyard yes I’m on windows 10.
And the version of Koala 2.3.0.
I can send my scss file, if you want to reproduce the error

Источник

Koala. Не компилируются файлы sass в css. Как исправить ошибку?

Оценить 8 комментариев

ну так вы сделали, что вас попросила программа?
Use —trace for backtrace.

Делайте, и вывод сюда скидывайте. Тогда можно будет предметно показать в чем ошибка.

, через ruby , до установки коаллы и потом галка

Возможно кто-нибудь знает другие способы решения проблемы с восприятием кодировки у Koala?

Источник

Koala: простое решение для использования препроцессоров SASS и LESS

Обычные редакторы кода, такие, как PhpStorm, Brackets или SublimeText с компиляторами не очень дружны. Процесс инсталляции нетривиален и иногда заставляет помучаться даже опытных разработчиков. Дополнительные плагины, которые требуются для работы препроцессора, могут вызывать конфликты, чувствительны к номеру версии, иногда придётся выставлять тонкие настройки и лезть «в кишочки» к системе. Другим решением (и более грамотным) будет использование сборщиков, таких как Gulp, однако, они требуют уже более серьёзной квалификации.

Чтобы обойти эти проблемы, было предложено несколько программных продуктов, из которых наибольшую популярность получила Koala, в силу своей простоты и бесплатности. Давайте пробежимся по её возможностям.

Возможности

Работает она так – вы запускаете программу, указываете исходную папку, в которой лежит код, написанный с применением препроцессора и конечную папку, в которой будет компилироваться файл CSS.

Программа имеет скромные размеры, около 100Мб. Потребление памяти и ресурсов процессора, разумеется, зависит от количества установленных проектов, однако, я бы сравнил её по ресурсоёмкости, например со Скайпом. Как и GoogleChrom, запускает несколько отдельных процессов, что хорошо видно в диспетчере. И чем больше проектов одновременно поддерживается – тем больше процессов.

Функционал, действительно, мощный:

Работа с препроцессорами SCSS, LESS и Compass;
Сборка одного CSS файла из нескольких импортируемых;
Компиляция CoffeeScript;
Минификация (сжатие) кода;
Автоматическая расстановка вендорных префиксов;
Несколько стилей вывода;
Работа с собственными библиотеками или с системными компиляторами на выбор.

Обработка может проходить в автоматическом режиме – то есть, Коала мониторит ваши файлы и при внесении изменений обрабатывает проект, либо в ручном – вы сами запускаете сборку, когда вам это нужно. Очевидно, что второй вариант экономит ресурсы компьютера и если у вас кода написано уже много, а машина слабовата, то лучше применять его.

Переходим к установке.

Установка

Скачать дистрибутив Koala можно здесь, посмотреть код и полистать гит-ветку здесь. Там же выложена и документация.

Сайт двуязычный (есть только английская и китайская версии), однако, сама программа поддерживает 12 языков, в том числе и русский (скажем за это спасибо переводчику Юрию Меркушину). Помимо основной «окошечной» версии, есть локализации для Linux и MacOS.

Скачивание и установка проблем не вызывает. Вы просто нажимаете большую зелёную кнопку с надписью «Download», закачиваете дистрибутив 80Мб на диск и запускаете. Не нужно ни регистрироваться, ни заполнять километровые анкеты, ни заводить учётные записи. При установке программа спросить, создавать ли иконку на рабочем столе и мини-иконку в трее – что вы решаете сами, по желанию. В остальном тоже ничего принципиально сложного нет, поэтому сразу можно переходить к работе.

Использование и настройки

Давайте запустим Koala и начнём работу над проектом. Для этого создадим папку проекта и в нём отдельную папку SCSS. Запишем туда файлы со следующим содержанием:

style.scss

_normalize.scss

_core.scss

Важно! Путь к папке проекта не должен содержать кириллических символов. Иначе компилятор может выдать ошибку.

Запускаем Koala и видим вот что.

Как видите, интерфейс у программы проще некуда. Слева три кнопочки – добавить проект, журнал и настройки. Справа большое окно проектов. Заглянем в настройки.

В основной вкладке можно выбрать язык. Далее переходим во вкладку SASS. Здесь по желанию можно указать принудительную расстановку автопрефиксов (1) и выбрать тип вывода (2). Их четыре, с разной степенью минификации.

Важно! Работоспособность может зависеть от того, будет ли программа формировать код с использованием собственной библиотеки или системного компилятора.

Конечно, проще, если Koala справится сама, и не придётся устанавливать ничего дополнительно. Однако, как показала моя практика, иногда встроенная библиотека не тянет (выдаёт ошибку «ArgumentError: Invalid byte sequence in UTF-8») – в таком случае нужно устанавливать компилятор глобально и заставлять программу использовать именно его.

Жмём крестик и добавляем нашу папку SCSS. Получаем вот что.

Чтобы появилась боковая панель справа, достаточно кликнуть по строке проекта. Как видим, в ней всё те же настройки, что мы уже видели, плюс появился чекбокс «автокомпиляция» и кнопка «compile».

Укажем путь для вывода файлов. Для этого щёлкнем по строке проекта правой кнопкой мыши и зададим путь к папке CSS. Тут программа ведёт себя немного странно – нужно не просто указать папку, а прямо задать конечный файл, куда будет собираться проект. В нашем случае style.css. Если путь не указывать, итоговый файл будет формироваться в то же папке, где лежат исходники.

После этого сверху появилась зелёная кнопка «обновить». Жмём. В папке CSS появились два файла — style.css и style.css.map. Если не появились (программа иногда задумывается – Коала, как-никак), то опять нажимаем на строку проекта левой кнопкой и в появившейся справа панели запускаем «compile».

Результат работы

Итак, поздравляю, вы пригласили Вия вот наш скомпилированный файл.

Добавим в исходник _core.scss, например, строку font-size: 16px; и включим автопрефиксы. Итоговый код поменялся:

Можно поэкспериментировать с разными стилями вывода.

При режиме «expand» закрывающие скобки – > – будут не после точек с запятой, а переместятся на следующую строку. При режиме «compact» каждый класс займёт одну строчку, а свойства вытянутся в линию. Наконец, «compressed» соберёт весь код в единственную строку – идеальный вариант, если вы боретесь за скорость загрузки сайта.

Заключение

Koala – простой и интуитивно понятный инструмент для работы с препроцессорами SCSS и LESS. Он позволит добавить в ваш css-код вендорные префиксы, выполнит минификацию и сборку. А главное – выручит вас, если нет желания и сил тратить время, настраивая плагины под свой редактор кода.

Есть у программы и свои недостатки. Сообщество отмечало конфликты в среде Windows 10, проблемы с расстановкой автопрефиксов для свойств flex и даже сбои при работе со шрифтами от Гугла. Настораживает и то, что разработчики, похоже, охладели к своему детищу – последний релиз вышел в октябре 2017 года. Тем не менее, пока Koala вполне работоспособна и сможет вас порадовать.

Источник

Yours div are elements Brothers and do not delimit the width based on each other. Unless you set a static width for everyone and position them equally.When you applied the position: absolute without the parent element being with position: relative, the elements followed the flow of the page rather than the parent element.An alternative is the parent element having position: relative while the children stay position: absolute. Such a way that you will use the size of the parent element to delimit the width of the children. That means the children will be relative to the father.Practical example:body {
margin: 0;
}
div.pai {
position: relative;
width: 500px;
height: 100vh;
background-color: rgb(220, 220, 220);
}
div.filhos {
position: absolute;
top: 0;
width: 100%;
}
div.filhos:nth-child(1) {
background-color: rgba(255, 255, 180, 0.5);
}
div.filhos:nth-child(2) {
background-color: rgba(255, 180, 255, 0.5);
margin: 10px;
}
div.filhos:nth-child(3) {
background-color: rgba(180, 255, 255, 0.5);
margin: 20px;
}<div class=»pai»>
<div class=»filhos»>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos tempora, maxime tenetur corporis deserunt ullam odio error cupiditate excepturi labore magnam autem ipsum blanditiis consequatur amet dolorum. Atque, soluta, modi.</div>
<div class=»filhos»>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia blanditiis cumque nihil fuga, sit porro hic recusandae nobis non assumenda deleniti dolores ut possimus error cupiditate obcaecati, laudantium quis quam.</div>
<div class=»filhos»>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum fugit nesciunt velit error, voluptatem, adipisci molestiae sed rerum reprehenderit provident qui. Aliquam officiis nostrum sapiente harum rem, commodi voluptate non!</div>
</div>Note: I placed a margin on the last two elements in order to shift them to better viewing.Applied to your code:body{
width: 100%;
height: 100vh;
font-family: «Montserrat», «Helvetica», arial, sans-serif;
font-weight: 600;
text-align: center;
}
.container {
max-width: 100%;
height: 100vh;
/*overflow:hidden;*/
}
.container-fluid {
padding: 0;
}
.pai {
position: relative;
}
.primeiro {
max-width: 100%;
height: 100vh;
color: red;
position: absolute;
top: 0;
}
.segundo {
max-width: 100%;
height: 100vh;
color: blue;
position: absolute;
top: 0;
}
.terceiro {
max-width: 100%;
height: 100vh;
color: orange;
position: absolute;
top: 0;
}<meta name=»viewport» content=»width=device-width, initial-scale=1, shrink-to-fit=no»>
<!— Bootstrap CSS —>
<link rel=»stylesheet» href=»https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css» integrity=»sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO» crossorigin=»anonymous»>
<div class=»container»>
<div class=»row»>
<div class=»col-lg-12″>
<div class=»container-fluid pai»>
<div class=»primeiro»>
<h1>T 1 esteee T 1 esteee T 1 esteee T 1 esteee</h1>
</div>
<div class=»segundo»>
<h1>T 2 esteee T 2fadfasdfasfasfdfsasff esteee T 2 esteee T 2 esteee</h1>
</div>
<div class=»terceiro»>
<h1>T 3 esteee T 3 esteefafadfadfafasfse T 3 esteee T 3 esteee</h1>
</div>
</div>
</div>
</div>
</div>
<!— JavaScript (Opcional) —>
<!— jQuery primeiro, depois Popper.js, depois Bootstrap JS —>
<script src=»https://code.jquery.com/jquery-3.3.1.slim.min.js» integrity=»sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo» crossorigin=»anonymous»></script>
<script src=»https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js» integrity=»sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49″ crossorigin=»anonymous»></script>
<script src=»https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js» integrity=»sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy» crossorigin=»anonymous»></script>

Источник

Comments

ArgumentError: invalid byte sequence in UTF-8 Use —trace for backtrace #696

Koala. Не компилируются файлы sass в css. Как исправить ошибку?

Compile problem UTF-8 #675

Koala. Не компилируются файлы sass в css. Как исправить ошибку?

Koala: простое решение для использования препроцессоров SASS и LESS

Возможности

Установка

Использование и настройки

Результат работы

Заключение

Читайте также: