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/>
The ng-bootstrap website states bootstrap.js may interefere with ng-bootstrap.
Installing bootstrap with "npm install boostrap" installs the folder "/node_modules/bootstrap/js".
Will this conflict with ng-bootstrap? If so, what's the best way to prevent this conflict?
Thank you!
Navigate to your project folder, open a new shell window and do
npm install --save #ng-bootstrap/ng-bootstrap
after that, you can add the following to your module.ts
import {NgbModule} from '#ng-bootstrap/ng-bootstrap';
#NgModule({
...
imports: [NgbModule, ...],
...
})
export class YourAppModule {
}
For a project, I'm using a library that I have built in order to share Vue components across the different applications.
So I import my component library as a npm module and I added it to the application package.json and that works fine.
The problem is that when I try to import something in the single component in the components library the application can't solve the dependencies of that component.
e.g component in the component library:
<template>
<!-- my html -->
</template>
</script>
// my script
</script>
<style scoped>
// here I import the basic style for the component:
#import "../../assets/base";
in the application package.json I have:
"components": "git+ssh://git#git.xxxxx.com:xxxxx/xxxxx/my-library.git#development",
and then I use the component normally in my project like this:
import MyComponent from "./components/MyComponent.vue";
The component library works fine, but when I import the component in the application I get the following error from webpack:
This dependency was not found:
* -!../../../../css-loader/index.js?sourceMap!../../assets/base in ./~/css-loader?sourceMap!./~/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-28803148","scoped":true,"hasInlineConfig":false}!./~/vue-loader/lib/selector.js?type=styles&index=0!./~/components/src/core/MyComponent.vue
To install it, you can run: npm install --save -!../../../../css-loader/index.js?sourceMap!../../assets/base
Of course if I substitute the #import with the actual css needed everything works fine. How can I make this configuration works?
My bad, the error was simply not adding lang="scss" in the style declaration of the component:
<style scoped>
this should be:
<style scoped lang="scss">
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
I have a meteor 1.3 project. I did:
npm i --save bourbon
and added
#import "bourbon";
to my styles.scss file.
But I get this error:
While processing files with fourseven:scss (for target web.browser):
/client/styles.scss: Scss compiler error: File to import: {}/client/bourbon not found in file: /Users/olejo/Documents/webapps/myapp/{}/client/styles.scss
How do I add a CSS library (in this case; bourbon) into a Meteor CSS file?
(I have added SCSS with meteor add fourseven:scss)