I'm trying to create a website using Jekyll, and everything worked fine. Until I wanted to custom the design.
I've updated my css/main.scss in order to include my custom theme in _sass/theme.scss:
// Import partials from `sass_dir` (defaults to `_sass`)
#import
"base",
"layout",
"syntax-highlighting",
"theme"
;
I've also updated _config.yml, because jekyll serve -H 0.0.0.0 didn't compile my new sass file. I've added the following:
sass:
sass_dir: _sass
The problem is jekyll serve doesn't compile my sass files, I always see the default css. I've also tried to copy the content of _sass/theme.scss directly at the end of css/main.scss, but nothing happened.
Until I modified one of those files while jekyll serve was running. The thing is jekyll-watch understands my updates and compile the scss files. May I have done something wrong for jekyll build don't compile sass files at the first try?
In case you need it, here my project tree:
.
├── _config.yml
├── css
│ ├── main.css
│ └── main.scss
├── _images
├── img
├── index.html
└── _sass
├── _base.scss
├── _layout.scss
├── _syntax-highlighting.scss
└── _theme.scss
Does someone know how to fix this?
Thank you,
Ok, I get it !
You have a css/main.css files that is copied as a static file in _site/css/main.css.
The problem is that it has the same name as the css/main.scss target which is also _site/css/main.css.
So at first build :
css/main.scss is processed to main.css
then, when static files are copied, it is overridden by css/main.css.
Solution : delete css/main.css
Have you added the front matter to the top of your main.scss file?
First add to your config.yml
sass:
sass_dir: _sass
Then add to top in your main.scss file, two dashed lines https://jekyllrb.com/docs/assets/
---
---
#charset "utf-8";
After that write in your cmd console
jekyll serve
and check your compilation.
I've run into similar issues when trying to use Jekyll to pass YAML content into partials. It looks like this workflow is not possible.
The work around was to place all variables on the main SCSS file and get Jekyll to populate the values from YAML, then using partials for the actual styles.
Here's a simple repo with some of my solutions: https://github.com/guschiavon/jekyllfy-sass
Related
I'm following a Kevin Powell bootstrap tutorial and he copies a custom.scss file into a separate folder, however I can't find that file to copy, not sure if it's because I'm using an updated version of bootstrap.
the bootstrap documentation says after install of bootstrap via npm i should have a folder structure like this:
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
However, upon installing bootstrap into folder it's like this:
your-project/
└── node_modules/
└── bootstrap
├── js
└── scss
No scss folder apart from in bootstrap folder.
Do I need to create a "custom.scss" file ...?
No you don't need to do that, as you could compile your css directly from the bootstrap source files. However, I would only consider this method if you plan use bootstrap out-of-the-box with no customizations, now or in the future. If you choose not to create this file, then you should probably just use a CDN instead.
Should you create a "custom.scss" file?
Yes, this is where you modify bootstrap variables, or extend its components, etc.. You can also choose to import all of bootstrap, or just the parts you need in this file.
The documentation goes over what should be in that file. But you can get started with just the following:
// Custom.scss
// Option A: Include all of Bootstrap
#import "node_modules/bootstrap/scss/bootstrap";
I'm building a react application with SASS for the styles and serving it with webpack-dev-server, a couple of components and some extract of the structure look like that:
├── App.js
├── components
│ ├── Layout.jsx
│ ├── Layout.scss
│ ├── header
│ ├── pages
│ └── footer
└── css
├── _vendors.scss
├── _variables.scss
├── _mixins.scss
└── utils.scss
Inside main.scss, I have all the #imports, also inside the vendors I have the imports in node_modules dependencies, etc...
Per each component in react have his own scss file.
But, I want the main.scss loaded in the Layout.jsx and use the mixins or imports or placeholder classes inside the scss file per component.
I was trying playing with css-loader and style-loader with includePath's and nothing successful.
It's this possible? It's related on the -loaders of webpack?
ps: Isn't viable have an .html file, this is a library of components.
A good way I found to keep track of styles for various react components is to have a style file for each corresponding component. So Header.react.jsx would have a corresponding Header.sass. Then you just include the style file on top of the react component, like so (using the ES6 syntax):
import './Header.sass';
For this to work with webpack, you need the appropriate loaders:
loaders: [
{
test: /\.sass/,
loader: 'style!css!autoprefixer!sass'
}
]
This is nice for development, because the styles are loaded in javascript and get updated automatically on any change if you're using the hot loader, but in production, you'd want to separate out the css file with all the styles. You can do this with a separate webpack config file for production, which can look something like this:
plugins: [
new ExtractTextPlugin('bundle.css', { allChunks: false })
],
loaders: [
{
test: /\.scss/,
loader: ExtractTextPlugin.extract(
'style-loader',
'css!autoprefixer!sass'
)
}
]
When doing things this way, it's good to include a sass config file and a mixin file, for the variables or mixins you use globally (with the regular sass #import). It's important not to define any actual styles in the files you import, since the styles would be included into all files you include it in, resulting in loads of duplication.
This is good for component libraries (as you put it), since webpack will only include the react components you use in your application, and in turn, it will only pull in the sass files you use.
I found this approach very handy, and used it in a smaller application here. Take a look if I haven't explained it well enough.
I have a css structure where I have a folder with vendors, other with modules, other with framework, and on the root sass I have my main file which imports all the other sass files form the other folders.
How can I set the file watcher on PHPStorm to only watch that specific main.scss file??
This is what I have on PHPStorm file watcher.
Arguments:
cache --update $FileName$:$FileParentDir$/css/$FileNameWithoutExtension$.css
Working directory:
$FileDir$
Output paths to refresh:
$FileParentDir$/css/$FileNameWithoutExtension$.css
yesterday i had the same problem and gave up and told myself that i have to sleep over it so i can craft new ideas 😁
The magic word here is Partials > SASS Guide: Partials
You have to extend all your non-main files with an underscore so your file vendors.sass for example would look like this: _vendors.sass. The File Watcher now knows that he can skip this file since it's a partial. The main file is then the only one which doesn't come with an underscore :)
Beneath i show you my folder structure and the configurations for the watcher.
├── css
│ ├── sass
│ │ ├── _cookie.sass
│ │ ├── _farben.sass
│ │ ├── _navi.sass
│ │ ├── _schriften.sass
│ │ ├── _sidebar.sass
│ │ ├── _typo.sass
│ │ └── style.sass
│ ├── style.css
And this is the configuration for phpstorm to tell the app where to save the (compressed) output-file:
Arguments:
--no-cache --update $FileName$:$FileParentDir$/$FileNameWithoutExtension$.css --style compressed
Working directory:
$fileDir$
Output paths to refresh:
$FileParentDir$/$FileNameWithoutExtension$.css
I think that you maybe already have solved this problem, since your question is more than five months old. But in my case i was blind to see that this was a simple sass-thing. So hopefully no one needs to struggle for a solution like me in the future!
Cheers
This is possible with PHPStorm (and presumably WebStorm).
Note: I am using version 2018.3
To transpile just a single "main" file, you need to configure the PHPStorm File Watcher Scope:
Open PHPStorm Preferences (on a Mac, command comma)
Search for File Watchers and edit them.
Find your SCSS file watcher (presumably this will work with other watchers) and edit it.
In the configuration window, click the 3-dot icon that is to the right of the "Scopes" dropdown.
In the "Scopes" window, click the + icon to add a new scope.
From the "Add Scope" dropdown, choose Local Scope.
When prompted, enter the descriptive name of the scope (something like Theme File Only)
Now you should be in the "Scope" window (see screenshot). In the file explorer section in the middle, expand the tree and find the file you'd like to transpile.
Click the file (you can choose multiple if appropriate), and click the Include button to the right.
Click Apply then OK.
In your file watcher dialog, in the "Scope" dropdown, ensure that the newly added scope (named Them File Only or similar) is selected. Click Apply then OK.
At this point, the IDE will only watch, and transpile, the specific file(s) selected.
I need to have special scss file that is different for every installation of the project, so I don't want to include it in git archive. But everything should work even if this file doesn't exist.
Is there any way to #import scss file only if it exists, ignoring file not found error?
You'll need to make use of the "import-path" option to do this, where the path you're importing contains the fallback files you want to import (in our case, we want an empty file).
Option 1: Vanilla Sass
File structure
├── fallback
├── _example.scss // <-- our blank file
├── _example.scss // <-- the file for the user to customize (optional)
├── style.scss
In style.scss:
#import "example";
/* the rest of our styles */
When you run your sass command, you would write it like this:
sass --watch ./css:./sass --load-path ./sass/fallback
Note that the fallback directory does not have to be inside your sass directory, it be anywhere on the filesystem you like.
See also: How does SCSS locate partials?
Option 2: Compass Extension
You may find that creating a Compass extension is a little more convenient if you're using this technique in multiple projects. It will automatically setup the load-path for you. You can learn more about creating extensions here: http://compass-style.org/help/tutorials/extensions/
Maybe with sass-globbing and a naming convention for optional files follow a specific order of loading.
Consider the following tree:
stackoverflow-14975341/
├── .gitignore
├── config.rb
├── css/
│ └── screen.css
└── sass/
├── optionals/
│ ├── .gitkeep
│ ├── _01_style.scss
│ └── _03_style.scss
└── screen.scss
with these files:
# config.rb
require 'sass-globbing'
sass_dir = 'sass'
css_dir = 'css'
relative_assets = true
and
// sass/screen.scss
#import "optionals/*";
and
// sass/optionals/_01_style.scss
.optional1 {
background-color: red;
}
and
// sass/optionals/_03_style.scss
.optional3 {
background-color: green;
}
and, for in the .gitignore:
sass/optional/*
Finally, to keep the optional folder, create an empty file named .gitkeep (the file name is not important).
When you compile the stylesheet, Compass generates the screen.css even if the file _02_style.scss is missing.
// css/screen.css
/* line 1, ../sass/optionals/_01_style.scss */
.optional1 {
background-color: red;
}
/* line 1, ../sass/optionals/_03_style.scss */
.optional3 {
background-color: green;
}
It is certainly possible to improve the system based on import additional paths.
So my source tree looks like this:
assets/
├── css/
│ ├── master.css.scss
│ └── admin/
│ └── admin_master.css.scss
└── img/
└── background.jpg
I have the Compass option relative_assets turned on and the css_dir and images_dir options set up correctly.
My problem is, that when calling image-url("background.jpg") from either master.css.scss or admin_master.css.scss, it always returns "../img/background.jpg", which of course is right for the former, but not for the latter (where it would actually mean "/assets/css/img/background.jpg").
Is there any way to override the relative paths on a file-per-file basis, in order to make this work?
This looks like a config / setup issue to me - I have this running fine on multiple projects and compass handles the various depths of stylesheets ok (it adds an extra ../ for the files that are 1 level deeper in the tree).
Try reviewing your compass config.rb file and check the css_dir (the folder you compile your css to, not the one where you .scss files live) and your project_path are correct.
Hope it helps,