I have a npm library that I use for styling which uses the following syntax to import scss files. I am not sure what this means and could not find any documentation online. I use grunt with webpack during my build process.
#import '~bourbon/app/assets/stylesheets/bourbon';
#import '~bourbon-neat';
From documentation on a sass-loader#imports project,
webpack provides an advanced mechanism to resolve files. The
sass-loader uses node-sass' custom importer feature to pass all
queries to the webpack resolving engine. Thus you can import your Sass
modules from node_modules. Just prepend them with a ~ to tell webpack
that this is not a relative import
So if you have a file named foo.css and a module foo then you would use ~ if you want to include the module.
Related
I'm upgrading an old system with many of these:
#import "~bootstrap/scss/mixins";
That fails when compiling with the dart-sass CLI.
I used to use node-sass, and packages like node-sass-tilde-importer and node-sass-package-importer to help with that syntax. They don't seem to work for dart-sass.
Given that I'm now using the dart sass CLI, how do I deal with this?
The solution is simple, but unfortunately does not support the tilde syntax.
The scss file should have this:
#import "foo/bar"; // <--- must remove tilde
And the cli syntax is:
sass --load-path=path/to/node_modules SomeFile.scss SomeFile.css
For completeness, the obvious other solution is:
#import "../../../node_modules/foo/bar";
Dart Sass CLI? I think there is no way to import like this in Dart Sass. You have to do it manually.
But there is a Sass migrator to fix legacy sass code, give it a try :
https://sass-lang.com/documentation/cli/migrator
If you are using it with module bundlers, this might help:
How to import sass using tilde prefix with webpack, sass-loader and dart sass
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 have downloaded a free HTML theme.
If I open index.html file of the theme in the browser it works perfectly.
However, now I need to integrate this theme in my Laravel Application. If I inspect element in the index.html file loaded in the browser, I can see that some .scss files are getting called.
The scss folder is present in the theme folder but I really don't know how to include this into my project
You can think of SASS as high level css which provides you with more features like making variable and easier css syntax etc ... but since browsers doesn't understands SASS you have to compile SASS into CSS there are multiple ways to do that.
First if your theme folder already has complied SASS (CSS Folder) you can use it if not and want to integrate with Laravel please follow these steps
Copy everything in your SASS Folder and place it in "/resources/assets/sass" so
they can be found by Laravel to be compiled
now you have to compile SASS into css you can use gulp manually or make use of
Laravel mix which is already implemented for you by Laravel
Laravel Ships with packages.json file you will find that in your app root
directory so before being able to compile SASS you have to run npm install in
your root directory (make sure that you have npm and node installed)
after running npm install now you can run either one of these to compile any
sass files you have in "resources/assets/sass"
npm run dev //this will compile one time only
npm run watch //this will automatically watch for any changes and compile
Now your sass files should have been compiled to css you can find the compiled css files in your "public/css" folder.
Hopefully you found this helpful you can read more about this in Laravel docs frontend section specifically Laravel Mix here
Laravel has a file called webpack.mix.js where you edit all frontend assets compilation by calling the mix.js/sass with the respective arguments. It is located at the root of the project.
1- In the resources folders create a new folder and call it scss with a app.scss file. The complete tree will be scss/app.scss
2- Go to the webpack.mix.js and add a new line: mix.sass('resources/sass/app.scss', 'public/css');. The first argument of the method is the source file, and the second is the destination folder.
3- In the app.scss file import all the theme scss files using #import 'file/source';
4- Open terminal/cmd in your Laravel project folder and Run npm run dev/watch to compiled your scss file, and at end your css file result will be located in public/css/app.css.
5- Import the app.css into your Html head section and reload the page. If the styles do not work, press ctrl + f5 to clean browser cache.
The latest version of Laravel utilizes a tool called Vite as a replacement for Laravel Mix.
In order to use Sass with Vite, make sure that Vite and Sass are installed run npm install and npm add -D sass
Make sure you have a sass or scss folder in your projects resources directory, and an scss file inside like app.scss
Make sure that you have configured vite.config.js (which can be found in a new Laravel projects root directory) to include an entry point for sass like so, utilizing the correct path and name for the folder you made:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: ['resources/scss/app.scss', 'resources/js/app.js'],
refresh: true,
}),
],
});
And in your Blade files add the following, again making sure to use the correct path for the folder you made:
#vite(['resources/scss/app.scss', 'resources/js/app.js'])
Then you can build your sass using Vite by running npm run build
According to this answer, I should be able to #import a .css file directly (as opposed to an import link).
However, I have the following situation:
If the file is named bootstrap.css
#import "../external_components/bootstrap/css/bootstrap";
Does not work, because sass can't find the file.
#import "../external_components/bootstrap/css/bootstrap.css";
Does work, but now I have the import link and an extra .css file hanging around.
Now, the answer I linked only mentions libsass and node but I would really like to be able to do something like that with ruby sass. Is there a way? Am I not understanding something basic?
My sass -v is 3.4 and apparently up-to-date.
How to import bootstrap-sass to scss file? without compass, without rails, without etc.
I just only have 2 files, .html and .scss (which later will be generated to css).
I know there's a lot questions how to import bootstrap-sass but everything use rails or compass
I already gem install bootstrap-sass, but I don't know what shall I do afterthat
In your .scss file
// Import Bootstrap Compass integration
#import "bootstrap-compass"
// Import custom Bootstrap variables
#import "bootstrap-variables"
// Import Bootstrap for Sass
#import "bootstrap"
make sure you give proper path to your .scss libraries of bootstrap. and the ordering of the inclusion is important.