I'm having this rather annoying trouble that I'm having some issues understanding when my Sass compiles.
I have a SCSS folder that compiles to a CSS folder in the root of my site, but in my SCSS folder I have individual folders for layout, utilities, etc.
The issue I am having is within my SCSS structure I have a vendors folder that houses everything from Bootstrap Grid, Font Awesome, etc. To keep the structure of the vendors folder neat and tidy I like to keep each vendor add on in a seperate folder. I use the following watch command:
sass --watch scss:css
Here's the file structure where ... is the files within the folder.
project-name/
├── scss/
│ └── style.scss
└── vendors/
├── bootstrap-grid
│ └── ...
└── fontawesome
└── ...
The issue I have when compiling to the CSS folder, the vendors folder and its contents are being compiled to the CSS folder:
project-name/
├── css/
│ └── style.css
└── vendors/
├── bootstrap-grid
│ └── ...
└── fontawesome
└── ...
Thanks in advance :)
Try using this command:
sass --watch scss/style.scss:css/style.css
Related
I have a RoR application that is working fine. I embedded an another one in to that one (Thredded). Everything is working fine, except that this other application does not apply css style...
my ./app/assets/stylesheets/application.scss file look like this:
#import "thredded";
#import "font-awesome";
and my stylesheet directory look like this:
./app/assets/stylesheets
├── application.scss
├── ckeditor
├── errors.scss
├── fonts
├── foundation_and_overrides.scss
├── scaffolds.scss
├── thredded
└── v1
The Thredded directory (the application I am trying to embedded):
./app/assets/stylesheets/thredded
├── base
├── _base.scss
├── components
├── _dependencies.scss
├── _email.scss
├── layout
├── _thredded.scss
└── utilities
I am probably doing something wrong, but I am not really into RoR, and I can't understand what...
RAILS_ENV=production rake assets:precompile
Solve the issue ! thanks
I really like eslint for es6 projects. Previously I've used it for new projects. Now I want to add it to a legacy project.
Fixing all pre-existing lint issues in one go is too much effort. Can I configure eslint (in .eslintrc.js) to only check files where I've explicitly enabled it with /* eslint-enable */ or similar?
ESLint has no default-disabled state that can be toggled by a file comment. You might be able to use .eslintignore for this purpose, however. You can ignore everything and then gradually whitelist files as you migrate them by using ! to un-ignore individual files. For example:
.
├── .eslintignore
├── .eslintrc.js
├── package.json
├── node_modules
│ └── ...
├── src
│ ├── index.js
│ └── module
│ └── foo.js
└── yarn.lock
Then your .eslintignore could look something like this:
# Start by ignoring everything by default
src/**/*.js
# Enable linting just for some files
!src/module/foo.js
In this case, src/index.js would be ignored, but it would lint src/module/foo.js.
I'm using the generator-gulp-angular library. In development, everything, including my CSS, works perfectly. When I do a production build, most of the CSS isn't being loaded.
The symptom of the problem is pretty simple. After I do a gulp build, my single CSS file looks like this:
#import url(assets/css/application/dashboard.index.css);
#import url(assets/css/application/detail.alerts.css);
#import url(assets/css/application/detail.index.css);
#import url(assets/css/application/detail.map.css);
#import url(assets/css/application/detail.pod.css);
This goes on for a while. (I had to drop in a bunch of CSS files created by a separate development team.)
The same exact thing happens in development mode, but in development the imported files are found and in production they're not. (Production is Heroku, FWIW.)
The main thing I can't understand is why the heck the CSS files are found in development. This is what a tree of .tmp looks like:
.tmp
├── partials
│ └── templateCacheHtml.js
└── serve
├── 404.html
├── app
│ ├── index.css
│ ├── index.js
│ ├── vendor.css
│ └── views
│ ├── shipments
│ │ └── index.html
│ └── user-sessions
│ └── new.html
└── index.html
6 directories, 8 files
There's obviously no assets/css/... in .tmp. The only place, for example, dashboard.index.css exists is in assets/css, which lives in src/app/ as opposed to public or anything like that.
I'm pretty stumped. Any guidance would be appreciated.
I ended up changing all css to scss and that fixed the problem.
Sass updates my main stylesheet build.css when I save changes to build.scss, but will not update build.css when I save changes to any partials, for example _grid-settings.scss. I essentially have to manually re-save build.scss each time I make a change to a partial in order for Sass to detect a change.
From my terminal:
Justins-MacBook-Air:ageneralist justinbrown$ sass --watch stylesheets:stylesheets
>>> Sass is watching for changes. Press Ctrl-C to stop.
write stylesheets/build.css
[Listen warning]:
Listen will be polling for changes. Learn more at https://github.com/guard/listen#polling-fallback.
My directory is:
stylesheets/
├── base
│ └── _base.scss
├── build.css
├── build.scss
├── layout
│ └── _layout.scss
└── vendor
├── _grid-settings.scss
├── bourbon
├── highlight
└── neat
I'm using:
Sass 3.3.8.
Ruby 2.0.0-p353
OSX 10.9
I've looked through several SO posts on issues with sass --watch but none have helped yet to guide me to a solution.
EDIT: I'm adding my build.scss here just in case that's the issue:
#import "vendor/bourbon/bourbon";
#import "vendor/grid-settings";
#import "vendor/neat/neat";
#import "base/base";
#import "layout/layout";
I had the same issue.
I managed to fix it by deleting the SASS cache directory. I also ran sudo gem update to update all gems on my system.
I'm not sure which of these things fixed it or if it was a combination of the two.
I had also stuck to the problem of Sass seemed wasn`t watching all file changes correctly.
Sass can`t watch changes in files that are located by the path directing upwards the watching file. For example:
Variant A (Which I had)
scss/
├── base
│ └── controller1.scss
├── utils
│ └── utils.scss
└── app
└── app.scss
Where app.scss is:
#import '../base/container1'
#import '../utils/utils'
compiling
sass --watch app/app.scss:../css/styles.css
sass --watch app:../css
In both cases sass tracks only app.scss file changes, but not controller1.scss or utils.scss
Variant B (solution)
scss/
├── base
│ └── controller1.scss
├── utils
│ └── utils.scss
└── app.scss
Where app.scss:
#import 'base/container1'
#import 'utils/utils'
compiling
sass --watch app.scss:../css/styles.css
Variant C (solution) also works
scss/
├── base
│ └── controller1.scss
├── utils
│ └── utils.scss
└── app.scss
Where app.scss:
#import 'base/container1'
and controller1.scss:
#import '../utils/utils'
// ...
This isn't a satisfactory answer for me, but I ended up trying out another gem that would handle preprocessing, guard-livereload, and though it itself didn't work, when I came back to try sass --watch sass properly monitored my stylesheets directory for changes (partials included) and subsequently recompiled build.scss.
I'm not certain why it works now, but am guessing one of the gems installed along with guard or guard-livereload solved the issue. Perhaps listen or fssm?
interface FileImporter {
findFileUrl(
url: string,
options: {fromImport: boolean}
): FileImporterResult | null;
}
Hie everyone !
My Sass project looks like this :
Project
├── sass/
│ ├── bootstrap/
│ │ ├── ...
│ │ ├── _bootstrap.scss
│ ├── mymodule/
│ │ ├── submodules/
│ │ ├── _mymodule.scss /*with only #import from submodules/ */
| └── main.scss /* various styles & #import bootstrap, mymodule */
└── stylesheets/
└── main.css
I'm trying to watch every modifications:
in the whole mymodule folder
in main.scss
And alterate only stylesheets/main.css with modifications i made.
Every commands I wrote have generate mymodule.css or others scss files/folders.
What is the sass --watch for doing this please ?
Thanks a lot in advance !
Alexis
You should totally use Compass!
What Compass is
Compass is a must-have tool for every SASS coder. Compass consists of two parts:
a meta-framework for SASS;
a command line tool used for compiling Compass projects and doing other useful stuff.
The compass watch command is exactly what you're looking for. It will recompile the CSS whenever you save a change in any of the following:
every non-partial file inside the sass folder (in your case it's only main.scss);
every partial imported by one of the above (recursively).
Partials that are never imported are ignored.
Compass will create a separate CSS file for every non-partial file. As for partials, they do not appear as separate CSS files because are incorporated inside non-partials.
Ridiculously short installation guide
For the following to work, you must have Ruby and RubyGems. Probably you already have them.
To start using Compass, do:
Install Compass with RubyGems: gem install compass.
Create a compass.rb file in the root of your project (in your case it's Project/compass.rb).
Run compass watch and start coding.
Example of a config.rb file
Here's a minimal compass.rb that might work for you:
css_dir = "stylesheets"
sass_dir = "sass"