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,
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 want to create my own theme--mytheme for python-sphinx.
tree project
project
├── build
├── make.bat
├── Makefile
├── mytheme
│ ├── static
│ │ └── style.css
│ └── theme.conf
└── source
└── conf.py
Content in theme.conf:
cat project/mytheme/theme.conf
[theme]
inherit = default
stylesheet = style.css
Conent in project/source/conf.py
cat project/source/conf.py
def setup(app):
app.add_stylesheet('static/style.css')
app.add_html_theme('mytheme', os.path.abspath(os.path.dirname(__file__)))
html_theme = 'mytheme'
html_theme_path = ['.']
Now let's make all my *.rst file in source.
cd project
make html
Running Sphinx v2.4.4
loading pickled environment... done
Theme error:
theme 'mytheme' doesn't have "theme" setting
Makefile:19: recipe for target 'html' failed
make: *** [html] Error 2
How to fix it ?
You use two mutually exclusive approaches - using local theme from filesystem, and at the same time register theme as it is done in themes distributed as Python PyPI package.
If you want a theme to be a part of the Sphinx project, good place for such project-specific themes is _themes/ in the directory with conf.py, and set html_theme = "mytheme" and html_theme_path = ["_themes"] in your conf.py.
_themes/
mytheme/
static/
css/
main.css
theme.conf
layout.html
conf.py
index.rst
second.rst
third.rst
...
(borrowed from https://blog.documatt.com/sphinx-theming/themes.html#project-specific-themes)
Completely delete block
def setup(app):
app.add_stylesheet('static/style.css')
app.add_html_theme('mytheme', os.path.abspath(os.path.dirname(__file__)))
add_html_theme() it is for themes distributed as a package. add_stylesheet() is to add additional (not replace existing) stylesheet. Themes main stylesheet is in their theme.conf stylesheet option.
The last issue I see in your example is your theme inherit from default theme. It works, it looks it's an old name for classic theme (https://www.sphinx-doc.org/en/master/usage/theming.html#builtin-themes), but use its official name - classic.
I have a repository structure as follows :-
xyz/src
1. abc
- p
- q
- r
2. def
- t
- u
- v
3. etc
- o
- m
- n
I have created a .mod file in src and run go build ./...
Except for local packages everything is fine. So if abc/p is being used in def then it throws the following exception :- cannot find module providing package abc/p. The idea behind keeping the .mod file in src package was to make sure the path is being found from where the mod file is located. Can anyone suggest where should the mod file ideally should be? also i tried placing it one directory above in xyz but still same issue as well as i created one for each sub directory. I am bit confused on this. Will I have to create separate repository for abc and etc. But considering gopath which earlier used to work for the same I think module should also be able to do the same. Any suggestions?
The most common and easiest approach is a single go.mod file in your repository, where that single go.mod file is placed in the root of your repository.
Russ Cox commented in #26664:
For all but power users, you probably want to adopt the usual convention that one repo = one module. It's important for long-term evolution of code storage options that a repo can contain multiple modules, but it's almost certainly not something you want to do by default.
The Modules wiki says:
For example, if you are creating a module for a repository
github.com/my/repo that will contain two packages with import paths
github.com/my/repo/foo and github.com/my/repo/bar, then the first
line in your go.mod file typically would declare your module path as
module github.com/my/repo, and the corresponding on-disk structure
could be:
repo/
├── go.mod <<<<< Note go.mod is located in repo root
├── bar
│ └── bar.go
└── foo
└── foo.go
In Go source code, packages are imported using the full path including
the module path. For example, if a module declared its identity in its
go.mod as module github.com/my/repo, a consumer could do:
import "example.com/my/repo/bar"
That imports package bar from the module github.com/my/repo.
I have a single go.mod in the root of my go application. I am using the following structure inspired by Kat Zien - How Do You Structure Your Go Apps
At the minute one of my applications looks like this
.
├── bin
├── cmd
│ ├── cli
│ └── server
│ └── main.go
├── pkg
│ ├── http
│ │ └── rest
| │ # app-specific directories excluded
│ └── storage
│ └── sqlite
All packages are imported via their full path, i.e. import "github.com/myusername/myapp/pkg/http/rest" otherwise it causes problems all over the place and this was the one change I had to make going from $GOPATH to go mod.
go mod then handles all the dependencies it discovers properly as far as I've discovered so far.
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
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.