]I am trying to compile a css file from sass. I am using bulma (bulma.io) as the css framework. Here is the directory structure I have
I am trying to change the grid.sass to output.css
and I am running this command from the "bulma" dir
sass grid.sass output.css
but I get the following error
Error: File to import not found or unreadable: utilities/mixins.sass.
on line 1 of grid.sass
Use --trace for backtrace.
I don't know why this error is appearing. I am running this according the documentation. I am on CentOs machine, and have gem installed.
[root#foo bulma]# sass -v
Sass 3.4.23 (Selective Steve)
I'm not too familiar with the sass gem, however according to their docs, you would not use quotes and add semicolons. So I assume something like:
#import utilities/mixins;
Import - Sass Docs
You might also need to rename your grid file to have an underscore, as mentioned in their docs as well.
I was getting similar error in when I was using bulma-extensions. To fix it, I had to update the import statement from
#import 'bulma/sass/utilities/_all.sass'
to this.
#import '../../bulma/sass/utilities/_all.sass'
Note: I installed sass-loader and node-sass in vue-cli generated project.
Related
So, the basic usage of SASS in react is
Install node-sass and import ./mysass.scss in index.js file
I did the same it worked with bootstrap SASS.
I have successfully imported bootstrap.scss in index.js file
import 'bootstrap/scss/bootstrap.scss';
But, now if I try to import mine it did not work.
Let me give you some information about my SASS files.
My style.scss file importing other CSS modules by using #use instead of #import in sass.
For example
Using -> `#use 'sections/navbar';`
Instead of -> `#import 'sections/navbar';`
I am also using #use "sass:map";
Does this #use create the problem?
I have checked the bootstrap.scss file and they are using #import.
See this issue on Github: Link. Solution posted by user asyncLiz.
That error is typically seen when using the node-sass implementation, which does not support Sass modules and is not supported by MDC. You'll need to use the Dart sass implementation.
Luckily it's an easy replacement when using sass-loader. Run npm uninstall node-sass && npm install sass. sass-loader will automatically use the new implementation.
If it does not, check your webpack.config.js in case you're manually specifying the implementation in your sass-loader options. If you are, change implementation: require('node-sass') to implementation: require('sass').
I have installed SASS on Ubuntu as explained in the instructions, which means that I downloaded the source dart-sass-1.22.2-linux-x64.tar.gz, extracted it and added a path variable into my .bashrc.
Calling
sass input.scss output.css
will create the css file from scss source as explained in the guide.
However, when entering
sass --watch input.scss output.css
nothing happens. The file output.css is not updated when input.scss is saved. There is also no message like
Sass is watching for changes. Press Ctrl-C to stop.
as I have seen in various other posts. This is how my terminal looks:
Any ideas why sass is not watching?
I have the same issue like you and this config work. I create 2 folder scss and css like
this
Then I create 1 scss file inside scss folder then I run
sass --watch scss:css
Then result
I think you forgot the : my example is this: sass --watch assets/css/main.scss:assets/css/main.css
Is there another compiler besides using the Command Prompt to compile Bourbon files?
Basically, I am using Koala as my SASS Compiler and I would like to try out using Bourbon with it and when I tried to import the bourbon into my SASS file and compile that file, it threw this error:Error: File to import not found or unreadable: bourbon..
Is there any other way I could solve this by using another compiler? It can be quite frustrating to compile the file every time using command prompt when I resume my work everyday.
Bourbon imports just like any other sass files. Double check your import code, and make sure you're linking directly to it (use the extension if you have to). Make sure you're actually putting the bourbon files into your sass directory. Then drill down and set your import path to the exact location of bourbon.scss.
I've used Codekit in the past, and it worked perfectly. You don't even have to install the bourbon files in your project.
I've installed Sass and set up a folder with an index.html file and style.scss in my local server (In Ubuntu 13.04).
I type this command into the terminal:
sass --watch style.scss:style.css
And get this output:
Sass is watching for changes. Press Ctrl-C to stop.
LoadError: cannot load such file -- rb-inotify
Use --trace for backtrace.
Sass will update the css the first time I save my .scss file but after that nothing. Anyone know why?
You need to install rb-inotify gem:
gem install rb-inotify
Its more of code editor issue. I faced this issue with brackets and once I switched to Atom (just to test) sass started writing on css file real time.
Tried with both sass --watch sass:css (Directory based watch) and sass --watch sass/app.sass:css/app.css (file based), and both worked fine.
I'm trying to use SASS for the first time with textmate. I seem to have installed it correctly by following the instructions on the git page - https://github.com/MarioRicalde/SCSS.tmbundle
but I can't find any information on how I can now use it.
When I make a .sass file the new Sass syntax is highlighted but when I save it is not compiled. Am I missing something?
Make sure to open up Terminal and in the command line, navigate to your project folder and run this command:
sass --watch style.scss:style.css
Name your working file style.scss, and it will compile and generate and update the style.css file that you reference in your document head.
Also make sure you have installed the Sass gem within your project directory :)
gem install sass
UPDATE
The bundle is only for installing syntax highlighting in Textmate. Sass is a precompiler for CSS, so it generates CSS from what you write in Sass. This is done through the sass --watch command above in the command line.
Read more on how to use and install Sass.