Need to import Material UI css into SCSS file
import { red } from '#mui/material/colors';
this can be imported in JS file.
But I need to import this into SCSS file.
Related
I was successfully using font-awesome in a laravel-vue project with laravel-mix and after migrating from laravel-mix to vite, there was no noticeable issue with icons. Fast-forward to a few weeks later, and icons are no longer showing, and there're no errors, icons are visible in dev tools under elements and are also properly built from what I can see vue-dev tools.
What can I do to resolve this?
This are excerpts of my code:
<template>
...
<font-awesome-icon icon="bell"></font-awesome-icon>
</template>
<script setup>
...
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome'
import { library } from '#fortawesome/fontawesome-svg-core'
import { faBell } from '#fortawesome/free-solid-svg-icons'
library.add(faBell)
</script>
Devtools screenshots:
I'm trying to add SCSS to my SvelteKit app. It works within components; however, when I convert the default app.css into a scss file and update the import from the base application, the page loads with a FOUC.
<script context="module">
import '../app.scss'; // Changed from .css
</script>
Is there a way to make SvelteKit precompile the styles and inline them the same way it does standard CSS files?
You can use a SCSS import instead:
<style lang="scss" global>
#import '../app';
</style>
The global keyword is necessary if you're importing a global layout stylesheet. If you leave it out, styles that are imported will be scoped to your component.
At the time of my original implementation of this, I am using Laravel 5.8, but as far as I know, this is still relevant and Larvel 7.x is out now. I'm trying to import a new javascript library into my Laravel 5.8 application using Mix. Specifically, the quill.js library.
Here are the steps I took to install quill and make it globally accessible in the application.
1
Install quill via npm
npm install quill --save-dev
2
Create a new file /resources/js/quill.js
3
In the quill.js file, I included the code that the quill documentation suggests: https://quilljs.com/guides/adding-quill-to-your-build-pipeline/
import Quill from 'quill/core';
import Toolbar from 'quill/modules/toolbar';
import Snow from 'quill/themes/snow';
import Bold from 'quill/formats/bold';
import Italic from 'quill/formats/italic';
import Header from 'quill/formats/header';
Quill.register({
'modules/toolbar': Toolbar,
'themes/snow': Snow,
'formats/bold': Bold,
'formats/italic': Italic,
'formats/header': Header
});
export default Quill;
4
In my app.js file, I included the quill.js file and assigned it to the global scope
require('./quill.js');
window.Quill = require('Quill');
5
Import the quill css in /resources/sass/app.scss
#import '~quill/dist/quill.core.css';
And for your theme
#import '~quill/dist/quill.snow.css';
6
Run npm run dev
If you don't necessarily want to import specific Quill components and just want to emulate the behaviour from CDN, you could just:
Install Quill
npm i quill
In your resources/js/app.js
import Quill from 'Quill';
Attach Quill on your elements
new Quill('.quill-editor', {});
I am working on Asp.net Core With Angular 6 Project
I installed ngx-admin template to angular Project
then includes scss style in my global style like this
#import '~#nebular/theme/styles/globals';
#include nb-install() {
#include nb-theme-global();
};
when I run the project I got this error :
Microsoft.AspNetCore.SpaServices[0]
Including .css files with #import is non-standard behaviour which will be removed in future versions of LibSass.
Use a custom importer to maintain this behaviour. Check your implementations documentation on how to create a custom importer.
any Help !?
This error indicates you are loading a CSS file. It's possible one of you above imports is importing a CSS file.
#import "foo.css";
Which basically is converting it to.
#import url(foo.css);
If you want to import the contents of a CSS file into the output CSS then it's recommended just reference the CSS file directly in your angular.json in the "styles": [] section.
I am attempting to import fa-carot-down, but I don't want to import the whole library. I need a single icon, but I'm not sure how to include it.
I'm using Webpack and SASS, if that makes any difference.
Alternatively, any means to get a carot icon for my dropdown would be appreciated.
You can try IcoMoon and Fontello as it helps you create your own library of fonts.
Furthur you can bundle it together with webpack to import the necessary icons
Now svg's are supported in IcoMoon