I am using Mix version 4.0.14, and I'm updating a project to place all compiled files into a specific directory. Initially, everything went into the public/ directory, but I now want all compiled files to go into public/assets/ to keep things tidy.
I could update all the paths in webpack.mix.js and add assets/ to the path, search my code where I've used mix(), and add assets/ to the path there.
Is there a cleaner way? For example, can I define assets/ somewhere that Mix knows to compile into that directory and then add the directory to the path when the assets are called? I've spent some time searching but no luck so far.
Related
I started using laravel-mix on my new Laravel 5.7 project to compile all the js/css into one file, which will appear in my public js/css directory (one for each page) like this:
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.js('resources/js/create.member.js', 'public/js/backend/members')
.sass('resources/sass/create.member.scss', 'public/css/backend/members')
.sourceMaps();
Like this I want to keep the views tidy and reduce the number of assets that have to be loaded.
Everything fine so far and I understand how to work with laravel-mix. Now I installed some packages, specifically cropperjs and summernote, via npm, to my node_modules directory.
It fails when I import/require their scss/js to the scripts which are going to be compiled and placed in public by laravel-mix because it seems that these scripts (cropper.js, summernote.scss, etc...) are referencing to other assets across their origin package directory within the node_modules directory (fonts, images, etc...)
For JS I do:
require('../../node_modules/cropperjs/dist/cropper.js');
require('../../node_modules/summernote/dist/summernote.js');
Fors SCSS I do:
#import '~cropperjs/src/css/cropper';
#import '~summernote/src/less/summernote-bs4';
My question is: What is good practice when using packages, installed with npm?
Do I have to put the whole package directory to my public directory?
Do I link to the assets in the package directory which is located in the node_modules directory?
Or is their any chance left to compile them together with my other assets via laravel-mix/webpack, maybe a flag I'm missing or so?
Do I have to use any additional software like bower to make things happen?
For js I just use
import 'vue'
import 'cropperjs'
Usually the package documentation will tell you how to import it.
You should not be compiling node assets in webpack.mix... Like barghouthi said, usually the package documentation will tell you how to import the package in your js file.
I use my Jekyll site (hosted on GitHub Pages) to do a lot of demos and the like. To avoid having to split up where those demo files live I'd really like to be able to include a directory inside the demo folder that I can use to do Sass includes (rather than building longer single files).
In other words:
/css should allow Sass includes from that folder or a sub-folder (which it does currently).
/demos/project-1/css should allow Sass includes from within that folder, or a sub folder (it doesn't currently).
I haven't figured out how to make this behave.
Add the directories that you need to process with sass in _config.yml, for example if you have sass files in another_path then use:
sass:
load_paths:
- _sass
- another_path
Sass will process the files located in _sass and another_path.
I'm pretty new to SASS/SCSS and got a git project with CSS Files in the main directory which shall import partials from a subdirectory. I was wondering if it's possible to install sass on the server, create a compass project so that css files will be created automatically after a live edit of the scss files on the server? Or does it have to be local with a filewatcher? I already tried to set up a compass project on the server but no css files were created automatically. Was it because of wrong settings or is it just not possible this way?
If it's possible is there a good step by step tutorial? I already found this
Maybe the problem is the path. In my config.rb I changed the path without knowing what to write in the string if sass and css directory are the same as project path. Didn't work with "/" or an empty string.
Both Sass and Compass provide watch commands. You can use either:
sass --watch input.scss:output.css (options)
or, assuming you've got your Compass config file correctly setting your css_dir vairable:
compass watch
Either of those should recompile the css file upon changes. If you want this done live on the server, you'll need to execute the watch command on the server.
To add a point to #aerook's answer,
In your projects you may have multiple scss and css files. In which case you may use the following to watch the entire scss directory to make changes in the css directory
sass --watch scss:css
PS : scss and css are folder names in the same directory path.
A while ago I was using compass to generate stylesheets from sass for a project.
Recently I returned to that project. I went to my sass directory and did "compass watch --debug .:."
This generated the error "You must compile individual stylesheets from the project directory".
I discovered that there was no config.rb in the directory. So I recreated one. It looks like this:
http_path = "/"
css_dir = "/css"
sass_dir = "/css"
images_dir = "/img"
javascripts_dir = "/js"
preferred_syntax = :sass
However, all of my attempts to use compass result in the same error, no matter what values I put in the config.
How do I get compass to actually process my sass?
just came across this problem too, and it has already been answered in the comment by Arnaud Valle.
But just for clarity, and people later searching.
Just creating a config.rb will not work, as compass does not recognise it.
The answer is just switch to your project directory(root) and then run
compass init
This will then create you a "working" config.rb, and two directories called sass, and stylesheets, in the sass directory will be a couple of start scss files.
If you do not want them, or want to use different directories, you can of course now edit your freshly created and working config.rb, and change your directories (and then delete the old automatically created ones)
Oh and i suspect your js will not be in a folder javascripts, so edit that to in the config.rb
Anyway having done that(or not) you should then be able to run
compass watch
and all should be good , i.e. your scss files get compiled to css files
As an alternative that I have not tried, but theoretically
compass compile [path/to/scss]
should work too, if you don't want to init compass
More information to be found in the compass documentation here
and to go completely over the top, if this is something you find yourself doing often, and hate the defaults then edit/add the following to your ~/.bash_profile
alias compass_init="compass init --syntax=sass --css-dir=css --javascripts-dir=js"
I usually have my config.rb in my project directory (or root) rather than the sass directory.
Folder structure would be like this:
config.rb
--- css
--- sass
Also your css_dir and sass_dir have the same value, which could lead to your issue as well.
Remove the "/" in front of your directory names.
This error occurs when your source path is incorrect. In your case, your directories have an extra "/". Removing them should fix your problem.
As others have said, creating a config.rb with compass init will fix it too.
Note that Config.rb is not necessary when using Grunt or similar runners that run compass. That might be how your project was running before without the config.rb file. The runner starts compass with all the paths and options in Gruntfile.js. Having paths/options in both Gruntfile and config.rb might cause problems.
Had this problem on windows 7 using Symfony with Gulp, i solved it using absolute paths like this:
gulp.task('compass', function() {
gulp.src('c:/wamp/www/mnv/src/Mnv/Bundle/MnvBundle/Resources/public/sass/*.scss')
.pipe(compass({
config_file: 'c:/wamp/www/mnv/src/Mnv/Bundle/MnvBundle/Resources/public/config.rb',
css: 'c:/wamp/www/mnv/src/Mnv/Bundle/MnvBundle/Resources/public/stylesheets',
sass: 'c:/wamp/www/mnv/src/Mnv/Bundle/MnvBundle/Resources/public/sass'
}))
.pipe(gulp.dest('c:/wamp/www/mnv/web/css'));
});
For anyone looking to compile SCSS without making a whole project (e.g., for a one-off page), you can just create a config.rb, but it needs at least two parameters: css_dir and sass_dir. (touch-ing it is not enough).
A minimal config.rb:
css_dir='.';sass_dir='.'
This effectively creates a compass project for the purpose of compiling simple files. You'll have to include the rest of the params if you want to use sprites, etc. Assuming compass can write to the directory, it'll create the .sass-cache directory once you run compass compile or compass watch for the first time.
It's also important to note that compass commands must be run from the directory with config.rb, or you'll get this error.
Finally, if you just want to take advantage of simple SASS features (and not Compass framework components), straight SASS is often simpler:
sass --watch foo.scss:foo.css
I experienced the same problem using gulp-compass-compile. Fixed that by changing srcDir option (that converts to --sass-dir option in compass compile call) for compass function from ./src/scss to src/scss. Hope that helps someone.
I've got a compass project up and running with scss files in a src directory which are being compiled into a sttylesheets directory as css. This is all fine and I'm able to use the sass #import command no problem.
However, I'd like to bring a bit of organisation to my sass partials and place them into relevant folders within the src directory. However, when I try to do this the #import command fails.
Is there a way of doing this?
UPDATE: I found in the compass docs that I can add add_import_path to my configuration file, but I can't get this to work either. I've tried a full path to the directory and a path relative to the project but nothing is happening.
Someone please help, it can't be this hard!
If you placed partials, for example, in src/partials directory — just use #import "partials/name" in sass/scss files to import them.
I found that in a webby static project where I was using compass / sass I had to explcitly set the base sass path to be used in order for it to pick up sass imports (everything worked except for imports).
So I ended up doing something like this in the compass config block:
config.sass_dir = File.join('content', 'css')
I imagine this is because I'm using something other than the default sass paths, so when I #import it was looking within it's default path instead of the actual path.
Hope that helps.
So it turned out I was going about things the wrong way. I was trying to be efficient and organise my folder structure before doing anything with compass. I realised that I needed to set compass to watch the project first and then create a folder structure. That way the folder structure gets replicated in my stylesheets or CSS folder instead of just being in the source folder. Now everything is working as it should!
I had the same problem. Actually I was migrated from rails + sprockets project to standalone one.
I don't know why, but Compass doesn't work with sprockets-style filenames, like screen.css.scss. I renamed all my files just to screen.scss and all partials worked as expected.
I had a similar problem. It was very stupid of me - but then again, most problems in programming are. My problem was that, although I had everything setup correctly for standalone, according to:
https://github.com/twbs/bootstrap-sass
I was using a subfolder structure like this:
project
-- stylesheets
-- bootstrap
-- sass
---- main.scss
------- subfolder1
----------- partial.scss
------- subfolder2
----------- partial2.scss
And in my main.scss, I did use #import correctly, like:
#import "subfolder1/partial.scss"
The problem was this:
Compass only sees partials correctly if the filenames start with underscores!
Once I renamed the files to _partial1.scss and _partial2.scss, everything worked without a problem.