I am working on a Laravel 5.5 project with Bootstrap 4. When I compile SASS it returns me that everything it's ok but the imported CSS file is not being watched by SASS.
I have this file /resources/assets/sass/app.scss:
// Variables
#import "variables";
// Bootstrap
#import "~bootstrap/scss/bootstrap";
// Bootstrap Toggle
// #import "/resources/assets/css/bootstrap-toggle.css"
// CSS
#import "/resources/assets/css/app.css" <- I want this file to be compiled
When I compile SASS with npm run watch or npm run dev and I save the previous file the console shows me how it is compiled successfully like this:
As a test, when I change "app.css" to "app.csss", the console displays an error when compiling, so the file it is being loaded.
But when I save something in that file app.css nothing changes, I've tried even to clear the browser's cache but the console shows me nothing. So the file is not being compiled.
What am I doing wrong?
Related
I am working on a laravel project and had written some CSS codes inapp.css. When I started building Vue components, the app.css codes stopped being rendered. The file is being fetched as <link href="{{ asset('/css/app.css') }}" rel="stylesheet">. The CSS does not reflect but font-awesome icons which are fetched in the same way are appearing. What could make this happen?
`
If I am reading your question correctly I will make a couple of assumptions and give what I think may have happened.
I read you edited app.css and then worked with your compiled system.
I am guessing you did this via npm run dev or a variation there of.
Upon doing this, it writes a new app.css file based on your app.scss file.
So, I am thinking that when you compiled your app you wiped out app.css as it should and rewrote the app.css with the build out of app.scss.
You should be having your css in app.scss or in a file that #import that file.
And to then to compile your css with npm run dev, npm run prod, or npm run watch
If you want to mix in css with app.scss you can either use the #import mentioned above or combine them via webpack.
To add font awesome to the app.css you do so with:
npm i #fortawesome/fontawesome-free
Add the following to app.scss:
// Font Awesome
#import "~#fortawesome/fontawesome-free/scss/fontawesome";
#import "~#fortawesome/fontawesome-free/scss/regular";
#import "~#fortawesome/fontawesome-free/scss/brands";
#import "~#fortawesome/fontawesome-free/scss/solid";
#import "~#fortawesome/fontawesome-free/scss/v4-shims";
Compile with npm run dev or npm run prod
https://laravel.com/docs/7.x/mix#sass
https://laravel.com/docs/7.x/mix#plain-css
I am using yarn with my rails 5.1 app (not webpacker, just the default asset pipeline).
Running a local server in development environment, I experience no issues with my assets.
But as soon as I precompile my assets (the environment doesn't matter) or let Heroku package my assets, all stylesheets (of node modules) I imported from within my application.sass file don't work anymore.
The reason for that behavior is that sass compiles all files into one output file, but because of some reason appears to miss the #import statements which include node modules and load these files separately.
So this:
#import "components/index.sass"
#import "nodemodule/nodemodule.css"
Compiles to this in development:
// content of "components/index.sass"
// content of "nodemodule/nodemodule.css"
and to this in production:
// content of "components/index.sass"
#import "nodemodule/nodemodule.css"
while loading node_module/nodemodule.css separately as an asset, but the browser cannot resolve it. Javascript works fine.
The links are from my project that you can use as reference
in your asset.rb you need to include the /node_modules path in your default load_path.
If you open the rails console and input Rails.application.config.assets.paths you should see the new path /yourproject/node_modules added.
Then you simply write:
#import "nodemodule.css"
In my case for bootstrap 4 in my application.scss
#import bootstrap/scss/bootstrap
which correspond to the file in node_modules/bootstrap/scss/bootstrap.scss
for jquery.js and bootstrap.js you can check my application.js
I was having the same problem. Inspired by this comment removing file extensions from the imports ended up fixing it.
This didn't work:
#import "#shopify/polaris/styles.css";
#import "#uppy/core/dist/style.css";
#import "#uppy/dashboard/dist/style.css";
while this did:
#import "#shopify/polaris/styles";
#import "#uppy/core/dist/style";
#import "#uppy/dashboard/dist/style";
The node_modules need to be installed with npm install for example, so they're probably not getting installed on Heroku. Check out https://devcenter.heroku.com/articles/using-multiple-buildpacks-for-an-app
Most likely, you need to setup a Node.js buildpack which will install your npm dependencies.
I have finally found the problem. It is a very nasty bug of the sass-rails gem & an unfortunate design of the sprockets component of Rails.
1) sass-rails
#import does not seem to work with node_modules as it does with other assets. While those other assets get compiled into one file, node_modules only get referenced, loaded by the browser as separate sources, but ultimately not being used by the browser.
2) sprockets
Sprockets' require statement does only work if it is at the beginning of a file. Or as they put it in their documentation:
Note: Directives are only processed if they come before any application code. Once you have a line that does not include a comment or whitespace then Sprockets will stop looking for directives. If you use a directive outside of the "header" of the document it will not do anything, and won't raise any errors.
However, in my case, I was importing directives from a file that itself was imported from application.sass.
I am new to jhipster. I added another css property in main.css file and called it in the home.html. But after running gulp install command that modification was disappeared from the main.css. So how to save that modification even after run that command?
When using the SASS option in JHipster, you should make all of your CSS or SCSS changes in main.scss.
During the build process, gulp (AngularJS) or webpack (Angular) will compile main.scss into main.css, replacing the contents of that file. This is also why main.css is included in .gitignore.
I've inherited a project that uses Sass. I'm a 'NET developer so compiling CSS isn't really something ive had much exposure to. The previous developer told me (as I run on Windows and he runs on a MAC) to install prepros.
The steps I have run through are:
Installed Ruby 2.3.0 for Windows
Installed sass "gem istall sass"
Installed compass "gem install compass"
Installed sass-globbing "gem install sass-globbing"
Installed compass-install-once "gem install compass-install-once"
I then opened Prepros and dragged in my "static folder", which has a structure like so:
Static
css
js
sass
components (multiple files in this directory)
components.sass
screen.sass
screen.css looks like:
#import compass/reset
#import lubalin.css
#import variables
#import typography
#import main
#import components
#import elements
#import shop
#import blog
#import sponsor
#import theme
And the content of the screen.sass files looks like so:
#import "components/*"
In PrePros I changed the compiler to use Ruby Sass instead of Node Sass (on the advice of the previous developer).
Now, when I click on screen.sass in PrePros and click "Process file" I get the error message "Error: It's not clear wghich file to import for '#import "components/*"'.
I found some threads online that suggested that this was due to Windows, and that the wildcard should be changed to #import "components/.", however when I run with this command the error i get is "Error: File to import not found or unreadable: components/."
Strangely, the file that prepros creates i.e. seems to understand perfectly which files to import for components.sass because I can see in the file the following section:
{
"path": "sass/components.sass",
"imports": [
"sass/components/_address.sass",
"sass/components/_buttons.sass",
"sass/components/_checkboxes.sass",
"sass/components/_cookies.sass",
"sass/components/_emailSignup.sass",
"sass/components/_forms.sass",
"sass/components/_moreContent.sass",
"sass/components/_postCode.sass",
"sass/components/_rte.sass",
"sass/components/_search.sass",
"sass/components/_separator.sass",
"sass/components/_tooltip.sass",
"sass/components/accordion.sass",
"sass/components/equalHeight.sass",
"sass/components/grid.sass",
"sass/components/modal.sass",
"sass/components/svgImages.sass",
"sass/components/table.sass",
"sass/components/_checkboxes.sass"
]
},
So it seems strange that PrePros can tell which files to import, yet when I try to compile it doesn't understand!
Lastly, the contents of the compass (config.rb) is:
require 'compass/import-once/activate'
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "js"
Can anyone help a Sass newbie that;s out of their depth get PrePros up and running!? What am I doing wrong?
Thanks for your time in advance
dotdev
In my opinion, if you are a NET Developer you don't need PrePros, because you have Visual Studio good plugin-compilers. Try WebEssentials, it will do all the work for you. WebEssentials compiles SASS/SCSS files automatically when you save it.
i wanted to ask, how can i continue working on existing project, while having no experience on compass/sass used here?
I always use Grunt and Less, but now i have to face Compass and Sass.
Here, i created screenshot of files structure.
My problem is, how setup system to get this all work. For example i see this code in compass/scss/style.scss:
#import "compass";
#import "bootstrap";
#import "mixins";
#import "defaults";
#import "layouts/forms";
#import "layouts/header-footer";
#import "layouts/home";
For example, i see #import compass, but there is no directory like this, and i dont know how can i attach - install compass, to get this work.
And another question, with grunt all i needed, was gruntfile configured, then i just type "grunt observe", and all changes in less files was converted to one css file.
But here, i can't find starting point. I have installed Ruby, and i have tried various commands in command line, but nothing works.
For example, from compass page, i have tried :
$ cd /path/to/project
$ compass watch
But this does nothing, just show some info in command line, that compass is watching for changes...
So in general, how to continue this project without installed components to work with ?
For Using Sass and Compass,
You are required to Install Ruby, sass and compass,
Then move to the project folder path where the config.rb file lies,
Then run the compass watch here
you can see like the following on your terminal / bash / command prompt
>>> Compass is watching for changes. Press Ctrl-C to Stop.
After this If there is no css file created, You have to simply make some changes on one of the scss files or partial files(_filename) that you have imported to style.scss.
The link will guide you to proper installation and creating project folder setting up.
http://compass-style.org/install/