Did anyone managed to add the SCSS from Material Design Bootstrap in the default template of Keystone.js ?
I am new to node.js and front-end development so I am not sure what I am doing but, I bascially added the MDB folder in my public/styles. After that I've modified the sites.scss, I commented out #import "site/variables"; and #import "site/layout"; and I added #import "mdb"; but this does not really seemed to work. I get the error:
in /my_path/public/styles/mdb/free/data/_variables-b4.scss:320:34
Error thrown for request: /styles/site.css
Error: Incompatible units: 'rem' and 'px'.
at options.error (/my_path/node_modules/node-sass/lib/index.js:291:26)
Anyone any idea?
Related
After upgrading Swiper to Version 7.0.7, I'm getting this annoying error:
Error: Cannot find module 'swiper/react'
.
.
.
Source
.next\server\pages\items.js (1:0) # Object.swiper/react
> 1 | module.exports = require("swiper/react");
In the previous Version (6.8) I didn't see this error. I also checked the migration guide and github issues but found no helpful answer.
The thing is "import cost" extension in VSCode is showing the size of the imported module, so I think there's a problem with Next.js or webpack exporting it, but have no idea how to make it work.
I copy/pasted the exact code from Swiper docs, but will write it here too if it helps:
/* _app.js - imported here because Next doesn't allow global css imports elsewhere */
import 'swiper/scss';
/* slider component which is used inside pages/items.js */
import { Swiper, SwiperSlide } from "swiper/react"; /* 72.4k (gzipped 21.4k) */
export default function CategoriesBar() {
return (
<Swiper
spaceBetween={50}
slidesPerView={3}
onSlideChange={() => console.log('slide change')}
onSwiper={(swiper) => console.log(swiper)}
>
<SwiperSlide>Slide 1</SwiperSlide>
<SwiperSlide>Slide 2</SwiperSlide>
<SwiperSlide>Slide 3</SwiperSlide>
<SwiperSlide>Slide 4</SwiperSlide>
</Swiper>
);
}
Update
after upgrading Next.js to 11.1.2, the error message changed to:
Error: Not supported
I found the solution. It was not related to next.js nor webpack. ESM modules support started from Node.js 12.20 and mine was 12.16. Upgraded my Node.js installation & everything is working fine now!
https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c
I am getting below error while running "gulp build" command to generate build for production server in a project. Please see error below :
[Autoprefixer] Error in plugin 'gulp-autoprefixer'
Message:
vendor.scss:1:1: Unclosed block
Details:
file: vendor.scss
line: 1
column: 1
source: $icon-font-path: "../../bower_components/bootstrap-sass-official/assets/fonts/bootstrap/";
/* Do not remove these comments below. It's the markers used by wiredep to inject
sass dependencies when defined in the bower.json of your dependencies */
// bower:scss
#import "../../bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";
// endbower
I have searched a lot on google but could not find any proper solution.
Please help me out by giving any solution to fix the above issue.
Thanks in advance.
Is it easily possible to change and apply a new bootstrap theme/template (like this one for example : https://elements.envato.com/admin-io-GG5ENR) to my Jhipster Angular 5 web app?
Is there a procedure to follow?
Thank you
I managed to change themes by editing the file from darkly (commented out) to lumen:
src\main\webapp\content\scss\vendor.scss
/***************************
put Sass variables here:
eg $input-color: red;
****************************/
// #import '~bootswatch/dist/darkly/variables';
#import '~bootswatch/dist/lumen/variables';
// Override Bootstrap variables
#import 'bootstrap-variables';
// Import Bootstrap source files from node_modules
#import '~bootstrap/scss/bootstrap';
// #import '~bootswatch/dist/darkly/bootswatch';
#import '~bootswatch/dist/lumen/bootswatch';
/* jhipster-needle-scss-add-vendor JHipster will add new css style */
Then I ran the command:
npm run webpack:build
The changes were hot reloaded.
I get the following errors in a starter project with angular2, angular-cli#webpack and primeng. The only ui component from PrimeNG is a dropdown which renders and it has its values but no css theme is applied ever.(see errors below in regards to CSS). I am not sure why I get this error and have spent countless hours with no result so I am at a loss at this point. Component was generated with ng command and ng serve runs the web server. Anybody any idea? I also have tried both node.js 6.5.0 and 4.5.0 (switching and managing them with nvm).
Any help is appreciated deeply.
Failed to load resource: the server responded with a status of 404
(Not Found)
http://localhost:3000/node_modules/primeng/resources/primeng.min.css
Failed to load resource: the server responded with a status of 404
(Not Found)
http://localhost:3000/src/app/resources/css/font-awesome-4.6.3/css/font-awesome.min.css
Failed to load resource: the server responded with a status of 404
(Not Found)
http://localhost:3000/node_modules/primeui/primeui-ng-all.min.css
Failed to load resource: the server responded with a status of 404
By the way now I posted the code in: https://github.com/GregHila/primeng-angular-cli.
Under the src/ there should be a file styles.css. I think you can import the styles here.
Eg.:
#import '../node_modules/primeng/resources/primeng.min.css';
The other way is to mention them in the angular-cli.json file in the styles array.
If you are using the webpack branch, then node_modules will not exist in the served directory. You will have to import the libraries you want to use, which will cause webpack to bundle them for you. Alternatively modify apps[0].scripts and apps[0].styles properties of angular-cli.json like in https://github.com/angular/angular-cli#global-library-installation.
Seems like 1.0.0-beta.11-webpack.9-4 has also fixed the bug
I followed this a link to try to configure Twitter's boostrap.less under Node 0.6.12 and Express 2.5.8:
app configuration:
app.use(express.compiler({src: publicDir, enable: ['less']}));
app.use(express.static(publicDir));
stylesheet link:
<link rel='stylesheet' href='/stylesheets/bootstrap.css' />
boostrap.less is the vanilla bootstrap.less file from bootstrap 2.02. the code section of it starts with:
// CSS Reset
#import "/public/stylesheets/reset.less";
When node is fired up and the page requested, the less paths get resolved correctly but the less parser throws an error:
../node_modules/less/lib/less/parser.js:385
throw new(LessError)(e, env);
The error causes node to crash after returning a 500 error for the contents of the boostrap.css file.
Any ideas how to get bootstrap.less to work in my setup?
Just a thought, but if you have Twitter's bootstrap.less via a git submodule, do you need to update the submodule? (we made that mistake, and had the same error as you until we realized it and fixed it)