guys,I am use Vue3 and Bootstrap 5.Everything work great unless I want to customize the Bootstrap default theme.For example,I want to change the primary color, I create a custom.scss in "src\scss",the content is:
// Default variable overrides
$primary:#255232;
#import "../node_modules/bootstrap/scss/bootstrap";
Then,I import the custom.scss in main.js,the content in js is:
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
//Import scss here
import "scss/custom.scss";
import "bootstrap/dist/js/bootstrap";
import "bootstrap/dist/js/bootstrap.bundle.js";
import "bootstrap-icons/font/bootstrap-icons.css";
createApp(App).use(router).mount("#app");
But It comes an Error :
ERROR Failed to compile with 1 error
This dependency was not found:
* scss/custom.scss in ./src/main.js
To install it, you can run: npm install --save scss/custom.scss
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\DumpStack.log.
tmp'
What should I do to fix this problem ? Thanks.
Here is my project structure:
my-project/
├──src/
│ │──scss/
│ │ └── custom.scss
│ └────────main.js
└──node_modules/
└── bootstrap/
Update:
I try to use file watcher to solve this problem . But I think there is an easier solution , I appreciate it if anyone can tell me , thank you !
Here is my solution :
I use WebStrom and add File Wtacher to scss file . The scss content:
// Default variable overrides
$primary:#255232;
#import "../../node_modules/bootstrap/scss/bootstrap";
I place it in /src/scss/custom.scss
In the main.js add the scss after file watcher convert in to css :
import "../src/scss/custom.css";
-First include sass and sass-loader to use scss in Vue:
npm install --save-dev sass sass-loader
-Now inside src folder create a file name it custom.scss
-inside custom.scss define your variable overrides.
$primary: #14213D;
$secondary: #D62828;
// Include Bootstrap SCSS files
#import '~bootstrap/scss/bootstrap.scss';
Then import that single SCSS file into your main.js file
import 'custom.scss'
and you're good to go!!
NB: You can find all of the possible variables and elements in node_modules/bootstrap/scss
Run this:
npm i -D sass
Create:
/src/scss/custom.scss
Add in custom.scss:
$primary: teal;
//customize here
#import "../node_modules/bootstrap/scss/bootstrap";
Add in main.js:
import "../src/scss/custom.scss";
Related
I have NextJs project with following structure
-pages
-_app.tsx
-app
-styles
-antdstyles.less
inside _app.tsx i am trying to load import '#styles/andstyles.less which simply imports antd styles ass this #import '~antd/dist/antd.less';
However i get error saying
/app/styles/antdstyles.less
#import '~antd/dist/antd.less';
^
'~antd/dist/antd.less' wasn't found. Tried - /home/computer/job/proj/app/styles/~antd/dist/antd.less,/home/computer/job/proj/css/~antd/dist/antd.less,/home/computer/job/proj/~antd/dist/antd.less,~antd/dist/antd.less
you have to use less loader and config it in next.config.js of your project. it's not supported to use less in next app out of the box.
I am building an angular application. While trying to import style scss files, I am getting compile error:
File to import not found or unreadable: layout/menu.
My folder structure is:
Insurance\src\shared\styles.scss
and for a scss file that I want to include inside the styles.scss is:
Insurance\src\shared\styles\layout\_menu.scss
Inside styles.scss I have written:
#import "layout/menu";
in my angulaar.json file I have mentioned:
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/shared/styles.scss"
],
However, when I compile the code it gives the following error:
#import "layout/menu";
^
File to import not found or unreadable: layout/menu.
in Insurance\Insurance\src\shared\styles.scss
File to import not found or unreadable: layout/menu.
Not sure why this is happening.
Is "styles" a folder within "shared"? If so, you want to say
#import "/styles/layout/menu";
Otherwise it won't know to look in the styles folder
I'm using Angular (Jhipster) on my application and I want to import several .scss files on my glocal.scss file. So I created an "util" folder (same level as global.scss file) and added these .scss partials inside it. On top of my global.scss file, I treid to do:
#import "util";
#import "util/*";
#import "util/;
And other alternatives, but I'm receiving this error:
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
undefined
^
Can't find stylesheet to import.
When I import one file at a time, it works.
How can I import a folder with .scss files inside my global .scss file?
I doesn't look like you can import a directory/folder based on this.
What you can do is in your utils folder create an index sass file that imports all the partials then importing utils should work based on this.
In my project, I need to combine stylesheets that were written in 2 different preprocessor languages (SASS and Stylus) into one css file.
My naïve approach was to just add stylus-loader with a test for the .styl extension into my webpack config, and #import a stylus file from my app.scss file (which is the entrypoint).
It seems that sass-loader doesn't resolve modules like it happens in JavaScript. I also tried making an entrypoint CSS file with my app.scss and the Stylus file as imports, which also doesn't work.
Is this just a configuration I'm missing or do css-loader and sass-loader just not support this kind of module resolve?
Entry CSS
#import "sass-loader!./app.scss";
#import "stylus-loader!../node_modules/vuetify/src/stylus/main.styl
This will just result in this error:
ERROR in ./node_modules/css-loader??ref--6-1!./css/app.css
Module not found: Error: Can't resolve './sass' in '/Users/tux/projects/zenner/platform-base/platform/assets/css'
# ./node_modules/css-loader??ref--6-1!./css/app.css 3:10-95
ERROR in ./node_modules/css-loader??ref--6-1!./css/app.css
Module not found: Error: Can't resolve './stylus' in '/Users/tux/projects/zenner/platform-base/platform/assets/css'
# ./node_modules/css-loader??ref--6-1!./css/app.css 4:10-131
Because none of css-loader, sass-loader or style-loader can load files in other languages (which I think should be possible with a loader chain string like sass-loader!my-file.scss), I instead imported the styles in my index javascript file and used extract-text plugin. This works fine.
webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin")
const extractCSS = new ExtractTextPlugin('css/styles.css')
{
test: /\.scss$/,
use: extractCSS.extract({use: ["css-loader", "sass-loader"]})
}, {
test: /\.styl$/,
use: extractCSS.extract({use: ["css-loader", 'stylus-loader']})
}
app.js
import "../css/app.scss"
import "vuetify/src/stylus/main.styl"
I am trying to follow this tutorial , I am not able to resolve the issue that the import of bootstrap does not work with the following error:
Error: File to import not found or unreadable: ../public/lib/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap.
SCSS File looks like this:
$brand-primary: #967ADC;
$brand-success: #A0D468;
#import "../public/lib/bootstrap-sass official/vendor/assets/stylesheets/bootstrap";
.sample { background: $brand-success; }
the generated css file contains following error:
Backtrace: style/style.scss:3
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.12/lib/sass/tree/import_node.rb:66:in
`rescue in import' ...
According to the bootstrap-sass official ReadMe I do not have to import bootstrap at all, but without the import statement, it does not know the bootstrap variables.
googling has not brought any success unfortunately