I'm trying to setup a Jekyll site with the Bourbon and Neat mixin libraries.
I created a _sass directory and installed Bourbon and Neat into this directory.
Then I import Bourbon and Neat in the main stylesheet (css/main.scss):
#import 'bourbon/bourbon';
#import 'neat/neat';
Then I'm trying out some mixins like span-columns() and shift(), but I'm getting this error:
Conversion error: Jekyll::Converters::Scss encountered an error while
converting 'css/main.scss': Undefined mixin 'span-columns'. on line 2
Does anybody know why Jekyll does not recognize these Bourbon mixins?
my setup is at:
https://github.com/acandael/demo
thanks for your help!
Related
I am learning about sass and I am wondering how we should give a link in our CSS stylesheet. I know sass files are stored differently but should we address it like this:
<link rel="stylesheet" href="mystyle.css" />
and then add a link to mystyle.scss then?
TL;DR: You cant use precompiled Style in your DOM.
SASS is a scripting language written in Ruby. You must compiled first because by default your browser understand only CSS. If you want that your browser compile your SASS files your can use some Libraries which compile your style to CSS. For example: https://github.com/slymax/sass-link
But regular you compile your SASS File first on your machine and then you link only to the CSS.
SASS cannot be directly linked via a stylesheet. It is a CSS preprocessor and is compiled down to regular css. You'll wanna install sass using npm (npm i sass) and do npx sass --watch scss:css for it to compile. (here scss is the sass directory and css is the css directory, it may be different for you). If you do npm i sass -g you wont need to include the npx since you installed it globally. You can then simply link your css to your index.html.
In the end you're always connecting your .css file to your style sheet. Never the scss/sass file itself.
You could use the VSCode (or any other IDE) Sass compiler plugin. But I prefer to do it manually as the compilers sometimes result in bugs for me.
I personally do the following:
In your terminal enter the following to install in your project directory:
npm install sass --save(previously dart-sass)
npm install bootstrap --save
npm install autoprefixer
or in one line:
npm install sass bootstrap autoprefixer --save
Within your project root create a "scss" folder, and within that, a file named "styles.scss"
This will be the file from which all imported sass is compiled into your destination.css file.
Then, you must create a script in your package.json to the scripts. I use the following:
"compileSass": "sass --watch scss:public/css"
Please note that the --watch means that whenever you save your modified.
Please note that the public/css dictates where the compiled file will be saved relative to your scss folder you just created.
In a new tab in your terminal, start your compiler by entering
npm run compileSass
Or whatever name you gave to your script in the package.json file.
THEN when you link your CSS file as a stylesheet it will be the compiled CSS that was generated from your styles.scss.
You should put all the file path.
Exemple :
<link rel="stylesheet"href="C:\Users\Name\Documents\HTML & CSS\style.css" />
For sass it's easy : How to import SCSS files into HTML files
I am new to SCSS. I love using SASS for my local development, but when I publish a client’s website and need to make a change, it’s a pain to have to dig out the old project and set everything up so I can edit locally and then publish those changes on the production site.
Currently, I make changes in the SCSS file and then I go to online SCSS to CSS converter tool and convert SCSS to CSS and then put that CSS into CSS file.
Is there any way that if I make a change in the SCSS file in the server then it should directly update the CSS file?
Currently, I use HTML, CSS, SCSS, and Javascript
Thanks,
Use sass package instead of VSCode Extensions like Live SASS Compiler.
Why should not we use "Live SASS Compiler" VSCode extension?
Live SASS Compiler extension is old and hasn't been updated for a while.
Some features like #debug, #warn, #error won't work, so if you are using it, you have to use the sass npm package for that.
So, How to install the sass package?
So simple, just run these commands.
npm install -g sass
And convert SASS to CSS automatically by running the below command on your terminal.
sass -w source/stylesheets/index.scss build/stylesheets/index.css
More information is available on the sass docs here
Source - https://pineco.de/the-simplest-sass-compile-setup
By - Adam Laki
Make sure your project has a package.json file (and you have Node installed on your machine). Run npm init if you have Node but not package.json file, to initialize one.
Install sass package:
npm install sass --save-dev
Learn more about the package and its CLI
In the package.json file's scripts section, add these:
"scripts": {
"sass-dev": "sass --watch --update --style=expanded assets/css",
"sass-prod": "sass --no-source-map --style=compressed assets/css"
},
Run scripts:
npm run sass-dev
// or
npm run sass-prod
What is a source map? A particular file that allows the browser to map back from the processed, concatenated files to the original ones. It is helpful because we can see the original file names when we debug the CSS in the developer tools.
The above is a very basic setup to compiling SCSS files and "watching" them for changes. Your server should have a pipeline or some sort of build system that it would be able to run this npm command in order to compile SCSS files, so theoretically you don't need to push your pre-compiled CSS files to the server, but it does it by itself.
My static website built using Gatsby utilizes a number of node_modules that use es6. From what I understand, I am facing the issue that is talked about in this link https://github.com/gatsbyjs/gatsby/issues/3780 where my gatsby build fails because uglify is not able to handle es6, and the babel presets built into gatsby do not transpile the node_modules. My initial thought was to edit the babel presets to include the node_modules, but I got a bunch of new errors on gatsby build that looked like this Module build failed: Error: Couldn't find preset. What other solutions can I try?
After trying a number of different solutions, I ended up copying the offending node packages locally and requiring the local versions instead of the node_modules version. This way I could transpile them myself to es5. This is a temporary solution until my team can move to using Gatsby 2 which will fix this problem in the future.
I am new to Pug aka Jade and what i want is to parse a file.pug
to a web browser like Google Chrome.
Following this (Pug on github),
i installed pug but when i create a file.html and file.pug
the pug doesn't render the tags to html.
What is needed to make this happen ?
PUG (or JADE) is a pre-processor that needs to be compiled to html. This means that you need a proper compile module to do that.
As given on the example at https://pugjs.org/api/getting-started.html
Best option is to install "pug" module from NPM
For that to work you first need to have installed NODEjs (from https://nodejs.org/en/)
then its only running the npm install commands to get PUG and PUG client:
npm i pug
npm i pug-cli
After that please refer to the PUG getting started website as stated above for quite easy and detail explanation of the process of using PUG:
https://pugjs.org/api/getting-started.html
I am trying to use components from http://react-components.com (eg. react-youtube) in Reagent based application, but probably my naive approach is not the right one. I tried to install NPM packages with lein-npm module, include script in html page and use them via reagent/adapt-react-class as in this SO question. But for except this sample I wasn't successful.
Usually I get errors like "require/import/module is not defined" or "Youtube is undefined" (by having (def yt-test [] (r/adapt-react-class js/Youtube)). I am confused about what is needed to do. I read something about webpack/browserify, saw cljsjs packages - are those required in order to make this working?
I wrote a step by step guide on how to achieve this with webpack:
blob.tomerweller.com/reagent-import-react-components-from-npm
The general concept is the same as #scttnlsn suggested: bundle all npm packages in an external JS file and expose them through the global window object.
Those components are packaged as CommonJS modules. One approach for accessing CommonJS modules from ClojureScript is to bundle them into a single JavaScript file that can be included with your ClojureScript build.
You'll need to create a JavaScript entry point file which requires your various NPM dependencies and exposes them to ClojureScript (for example, by setting them on window). Create a file (let's call it index.js) containing:
window.YouTube = require('react-youtube');
Then use a tool like Browserify to bundle your entry point file and all of the dependencies it requires:
npm install -g browserify
browserify index.js --standalone window > bundle.js
Include bundle.js in your ClojureScript build and you'll be able to access the React component from ClojureScript via js/YouTube