How can we use NUXT3 with sass, also please share the documentation.
I tried to add sass into nuxt3 project, but the vite looks like no options to load scss
Install it first and save as devDependency
$ yarn add sass sass-loader --dev
# or
$ npm install sass sass-loader --save-dev
Configure if you want to use global scss
// nuxt.config.ts
export default defineNuxtConfig({
// more
css: [
// SCSS file in the project
"~/assets/style/main.scss", // you should add main.scss somewhere in your app
],
})
In your components
<style lang="scss" scoped>
//...
<style/>
Related
I followed the following guide:
https://getbootstrap.com/docs/5.2/getting-started/vite/
and I still get all sorts of errors, sometimes file is not found or sometimes I just don't see the bootstrap design.
I installed Bootstrap using npm:
npm install bootstrap#5.2.2
Then I installed scss using npm:
npm i --save-dev sass
Then I added the following to vite.config.js:
resolve: {
alias: {
'~bootstrap': path.resolve(__dirname, 'nodes_modules/bootstrap'),
}
}
Also added the following to /resources/app.js:
import '/resources/scss/styles.scss'
import * as bootstrap from 'bootstrap';
I also created a new scss folder in /resources and placed the following styles.scss file inside:
// Import all of Bootstrap's CSS
#import "~bootstrap/scss/bootstrap";
But when I use npm run dev or build, the Bootstrap styling don't show up, or I'm getting error about files not existing, for example:
[plugin:vite:css] [sass] ENOENT: no such file or directory, open '/var/www/myapp/nodes_modules/bootstrap/scss/bootstrap
Install Bootstrap 5 in Laravel 9 with Vite
Install Bootstrap 5 and dependencies
To install Bootstrap from the command terminal execute the following instructions
npm i bootstrap sass #popperjs/core --save-dev
Configure Vite and dependencies
Rename the file: resources/css/app.css to: resources/css/app.scss
Open the vite.config.js file found in the root of the project and change the reference resources/css/app.css to resources/css/app.scss
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.scss', 'resources/js/app.js'],
refresh: true,
}),
],
});
In the resources/css/app.scss file import Bootstrap by adding the following line of code
#import 'bootstrap/scss/bootstrap';
In the file resources/js/bootstrap.js add the following lines
...
import * as Popper from '#popperjs/core'
window.Popper = Popper
import 'bootstrap'
...
Change .blade for Hot reloading
In the resources/views/welcome.blade.php file, paste the following code before the closing tag:
...
#vite(['resources/js/app.js', 'resources/css/app.scss'])
</head>
<body>
...
Test
Run dev server with command:
npm run dev
I am using Grunt to compile my SASS files. Now I need to add animate.css from npm, so I added it with:
$ npm install animate.css --save
But how do I add it to Grunt? I thought, that changing the "sass" configuration by adding "node_modules/animate.css/animate.css" to the array would be enough:
sass: {
dist: {
options: {
style: "compressed",
compass: false
},
files: {
"dist/main.css": ["scss/main.scss", "node_modules/animate.css/animate.css"]
}
}
},
Unfortunately, this doesn't work.
My main.scss file, is just a file sitting next to node_modules directory, so what I could do, is to rename node_modules/animate.css/animate.css into _animate.scss and then #import it in my main.scss, but this seems to be not the proper way of adding styles. This would mean, that every time I need some external styles, I would have to rename them to .scss
This seems to be such a basic thing to do, to import styles from npm, yet I cannot find information about it.
I've got component level .scss files (filename.module.scss)
and I want to purge unused css from these files.
Since the styling classnames get hashed. I was wondering how I can get purgeCSS to work with a next.js app that uses module.scss files for most of the styling.
https://github.com/FullHuman/purgecss/issues/163#issuecomment-526607181
this issue here goes over it but for a react application
You can use a dedicated NPM package next-purge-css-modules, made just for this purpose:
npm install next-purge-css-modules
and in your next.config.js, use:
const withPurgeCSSModules = require('next-purge-css-modules');
const nextConfig = { ... };
module.exports = withPurgeCSSModules(nextConfig);
I'm just starting to learn React (have some JavaScript knowledge, as I'm learning tis as well) and building my first project. I would like to know how to add styles to my first React project, using CSS/SCSS as I have some knowledge and understanding from my html, CSS/SCSS learning projects.
How do you add SCSS to your React Project?
If using create-react-app then:
1)First install sass dependency using npm:
npm install sass --save-dev
2)Import your sass file to your componentName.js file
import '../scss/FileName.scss';
The way to use scss depends a bit on your React development environment. For beginners React recommends using Create React App which is, according to them, "a comfortable environment for learning React, and is the best way to start building a new single-page application in React." You can read more about it at https://reactjs.org/docs/create-a-new-react-app.html. To create your app you simply type the following at the command line:
npx create-react-app my-app
After that, React sets up a full development environment with css files you can edit to style your code.
If you want to continue using create-react-app (sometimes called CRA) and use scss then you can install the Dart Sass library by typing:
npm i sass --save-dev
(Keep in mind that node-sass in deprecated and we are using Dart Sass instead of it)
For a full explanation about how to use node-sass and CRA together see "How to Use SASS in Create React App?": https://www.robinwieruch.de/create-react-app-with-sass-support
Once you move beyond CRA you can tinker with your own webpack.config.js which can also be set up to compile and import SCSS files. But if you are just starting out with React then you may want to leave tinkering with your webpack.config.js for later and stick with CRA.
If you are using create-react-app, just add sass as a dev dependency.
yarn add -D sass or npm install --save-dev sass
Then just replace/rename all CSS files and corresponding imports to *.scss instead of *.css
first, install sass in your project. Then import it into your component.
install sass:
Using npm:
npm install sass
Using yarn
yarn add sass
import in your component:
import example from './example.scss'
Node-sass is deprecated, use sass.
install sass:
Using npm: npm install sass --save-dev
Using yarn: yarn add sass
import in your component: import example from './example.scss'
if you are in starting your new project and want control over webpack config, try to use react-app-rewired or craco, they offer you control over webpack config, by which you can add any loader into your config.
if CRA suffices your need then no need to complicate things above-mentioned packages.
Thanks
npm install sass
create theme/assets folder inside src.
add variable mixins file with underscore.
incude scss file in component scss file.
#import './Assets/mixins';
Here is an link to sample react project with scss
The steps to add Sass to Create React App are:
Install node-sass:
npm install node-sass
or
yarn add node-sass
Since node-sass has deprecated therefore you can use the following steps to install sass :-
npm install sass --save-dev
**or**
yarn add sass
Convert your .css files to .scss
Import your .scss files in your React components like App.js
i'm starting a new project using reactjs ES6 and webpack
using react-static-boilerplate starter question is how can i import bootstrap4 into the build proccess ?
i dont want to use the bootstrap.css generated file, instead i want webpack to build it for me so i can get to change its #variables and apply my theme etc.
i started project by cloning boilerplate
> git clone -o react-static-boilerplate -b master --single-branch \
https://github.com/kriasoft/react-static-boilerplate.git MyApp
>cd MyApp && npm install
installed bootstrap using npm
npm install bootstrap#4.0.0-alpha.3
now if i required the main bootstrap file into my index.js it will load fine. but how can i include the sass files of bootsrap to start customizing it ?
First of all you need to download proper loader for scss
Install sass-loader
npm install sass-loader --save-dev
Then you need to configure your webpack to test all scss files so it can handle it. Here it is how it is done
{test: /\.scss$/, loaders: [ 'style', 'css', 'sass' ]}
If you got error regarding node-sass
If you got error like cannot resolve node-sass then install
npm i node-sass --save-dev
Now if you import bootstrap.scss webpack will bundle it for you
import "bootstrap/scss/bootstrap.scss"
How to customize it
Example in your own scss file
$btn-font-weight:bold;
and then import the component you want to override or the whole bootstrap.scss
#import '~bootstrap/scss/bootstrap.scss';
In my case style.scss
$btn-font-weight:bold;
#import '~bootstrap/scss/bootstrap.scss';
main.js
import "bootstrap/scss/bootstrap.scss"
import "./style.scss"
Hope this help you to achieve your goal!
I have created a demo app here
run npm install
and npm start
got to localhost:8080
Seems like the boilerplate doesn't use sass-loader, and doesn't look for .scss files.
So first off install npm i sass-loader --save
Then under the loaders part in the webpack config you should add something like this:
webpack.config.js
var path = require('path');
var nodeModules = path.resolve(path.join(__dirname, 'node_modules'));
// this is the entire config object
const config = {
// ...
loaders: [
// ...
{
test: /\.(css|scss)$/,
include: [
path.join(nodeModules, 'bootstrap'),
],
loaders: ["style", "css", "sass"]
}
]
// ...
};
Now, if you want to play around with bootstrap's .scss variables, you can do so like this:
styles/app.scss
$brand-warning: pink !default;
#import '~bootstrap/scss/bootstrap.scss';
and in your main.js put in the style import
import "styles/app.scss";
Also, I should mention, this seems very close to this answer
Now that you're switched to react-slingshot with webpack already set up for sass there's a few less steps. From the raw boilerplate, add bootstrap 4 with npm as you already did:
npm install bootstrap#4.0.0-alpha.3 --save
Then in src/styles/styles.scss you want to add a couple imports
#import "./bootstrap-custom";
#import "~bootstrap/scss/bootstrap";
This is essentially the same thing as #DanielDubovski is showing you but it's a little more conventional to have a separate file of bootstrap overrides, and you don't need default anymore since you're planning on overriding bootstraps defaults and you probably don't want to accidentally override your custom bootstrap colors. To get started with src/styles/bootstrap-custom.scss, you can go into node_modules/bootstrap/scss/_variables.scss and see a complete list of the default variables. You can then copy out the variable names that you want to update. Here's an example of the bootstrap-custom.scss that just overrides the greyscale colors:
/*
* overrides for bootstrap defaults, you can add more here as needed, see node_modules/bootstrap/scss/_variables.scss for a complete list
*/
$gray-dark: #333;
$gray: #777;
$gray-light: #000;
$gray-lighter: #bbb;
$gray-lightest: #ddd;
npm install --save-dev sass-loader css-loader style-loader node-sass
on your webpack.config.js:
loaders: [
{
test: /\.scss$/,
loaders: [ 'style', 'css', 'sass' ]
}
]
Not the OP's original framework (but that was a few years back). As of react-scripts#2.0.0 it now has built in SCSS compiling. So if you're using that for any new projects, it's simple enough to import: https://facebook.github.io/create-react-app/docs/adding-bootstrap