I’ve started to play around with rollupjs and can’t seem to get it working with bootstrap-sass.
I'm getting the error when bundling -
🚨 (sass plugin) File to import not found or unreadable: bootstrap.
Parent style sheet: stdin
Snippets of my code below.
I've included a rollup-plugin-sass in my rollup.config.js.
// index.js
import './jquery-global.js'
import 'bootstrap-sass'
import './style.scss'
// jquery-global.js
import jquery from 'jquery'
window.jQuery = jquery
// style.scss
#import url('https://fonts.googleapis.com/css?family=Open+Sans');
#import 'bootstrap';
body {
font-family: 'Open Sans', sans-serif;
}
Try adding the extension so that rollup knows its a sass file, don't forget the absolute path:
#import './bootstrap.scss';
Anyway, rollup sass plugins do not know to parse #import statements..for now.
Related
I'm working on a symfony / twig project but we are slightly switching to React Js.
Currently our style file organisation looks like :
main.less
#import 'helpers/_variables';
#import 'base/_reset';
#import 'base/_typography';
#import 'layout/_header';
#import 'layout/_footer';
#import 'layout/_sidebar';
#import 'components/_buttons';
#import 'components/_dropdown';
#import 'components/_carousel';
#import 'pages/_homepage';
#import 'pages/_contact';
#import 'pages/_about';
#import 'tools/gliderjs/glider';
Is it better to import all my react component styles here, or import them separatly in the correct component and keep the main.less for global styling / older part of the site ?
Any suggestion welcome :)
Thanks !
Just want to find best css file import and organisation for my frontend app
Is it possible to import and extend the bootstrap-icons.css in the scss file like importing the bootstrap.scss?
What I've tried so far without success:
#import "../node_modules/bootstrap-icons/font/bootstrap-icons";
.right-square-icon{
font-size: 4rem;
#extend .bi;
#extend .bi-caret-right-square;
#extend .text-dark;
}
with the error:
The selector ".bi" was not found.
You can import the "bootstrap-icons.scss" file and edit the font files' location variable like this -
$bootstrap-icons-font-src: url("../webfonts/bootstrap-icons.woff2?30af91bf14e37666a085fb8a161ff36d") format("woff2"), url("../webfonts/bootstrap-icons.woff?30af91bf14e37666a085fb8a161ff36d") format("woff");
#import "~bootstrap-icons/font/bootstrap-icons.scss";
Yes it is possible to import bootstrap-icons via scss.
#import "~bootstrap-icons/font/bootstrap-icons.css";
All response is incomplete or wrong.
You need 2 things :
override $bootstrap-icons-font-src bootstrap variable which set by wrong path compilation for webpack encore
import bootstrap-icons.scss with relative path in your global.scss file
Result :
$bootstrap-icons-font-src: url("../../node_modules/bootstrap-icons/font/fonts/bootstrap-icons.woff2") format("woff2"), url("../../node_modules/bootstrap-icons/font/fonts/bootstrap-icons.woff") format("woff");
#import "../../node_modules/bootstrap-icons/font/bootstrap-icons.scss";
Then, just this run like a charm :
<i class="bi bi-plus-square-fill" style="font-size: 2rem; color: cornflowerblue;"></i>
Context of response :
PHP 8
Symfony 6.2
Webpack encore
I am new to SASS and React.js. I have scoured many answers on this platform and cannot seem to spot my issue. I have a partial file _variables.scss which looks like the following:
// Fonts
#import url('https://fonts.googleapis.com/css2?family=Raleway:wght#200;300;400;500;600;700&display=swap');
$raleway-font: 'Raleway', sans-serif;
I have imported this into my App.scss, along with my other scss files like:
// Utilities
#import 'styles/variables';
// Stylesheets
#import '~bootstrap/scss/bootstrap';
#import 'components/navigationBar/navbar';
#import 'components/main/main';
#import 'components/main/mostRecent/mostRecent';
#import 'components/main/mostRecent/recentCard/recentCard';
#import 'components/main/featuredCard/featuredCard';
But when I try to use the variable in any of the files, for example featuredCard.scss - I am given the error:
SassError: Undefined variable: "$raleway-font".
Note that I have used create-react-app, and installed "node-sass": "^4.14.1".
I am importing my files into the jsx files with import './featuredCard.scss';.
Does anyone know why this is happening?
Apparently you are incorrectly importing the address of the variable,
#import 'styles/variables';
A way to check that you are not correctly placing the address of variables.scss , is copying the code in 'components / main / featuredCard / featuredCard';
#import url('https://fonts.googleapis.com/css2?family=Raleway:wght#200;300;400;500;600;700&display=swap');
$raleway-font: 'Raleway', sans-serif;
//code featuredCard
And comment #import 'styles/variables';
I'm trying to learn Laravel and I've run into an issue that I can't seem to figure out with Google Fonts and Sass.
I'm trying to load my font on app.scss with:
// Fonts
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#400;700&display=swap');
// Variables
#import 'variables';
// Bootstrap
#import '~bootstrap/scss/bootstrap';
But it compiles to app.css as:
#import url(https://fonts.googleapis.com/css2?family=Open+Sans:wght#400;
700&display=swap);#charset "UTF-8";
If I manually correct app.css it works. But how do I get Sass or Laravel to compile it properly?
This is caused by a known bug in Webpack which appears to be still open.
Details here: https://github.com/webpack/webpack/issues/10873
I solved it by modifying it as follows:
original:
#import url ("https://fonts.googleapis.com/css2?family=Rubik:wght#400;700&display=swap");
modified:
#import url ("https://fonts.googleapis.com/css2?family=Rubik:400,700");
What am I doing wrong here?
I am using less#3.8.1
A.css (css file that imports from url)
#import url('https://fonts.googleapis.com/css?family=Source Sans Pro:300,400,600,700,400italic,700italic&subset=latin');
App.less (less file that imports A.css)
#import (css) './A.css';
with webpack build, it tries to load
./https://fonts.googleapis.com/css?family=Source Sans Pro:300,400,600,700,400italic,700italic&subset=latin
instead of the css from url.
Stack:
#import url('https://fonts.googleapis.com/css?family=Source Sans Pro:300,400,600,700,400italic,700italic&subset=latin');
^
Can't resolve './https://fonts.googleapis.com/css?family=Source Sans Pro:300,400,600,700,400italic,700italic&subset=latin' in ...
Summary
A.Less - imports -> B.css - (B.css uses import via url) -> Not working
Less does not automatically switch to a CSS import as a fallback anymore. Try this:
#import (css) url('https://fonts.googleapis.com/css?family=Source Sans Pro:300,400,600,700,400italic,700italic&subset=latin');
To import the CSS without it being processed
#import (inline) './A.css';
or treat the CSS as a directive and import and compile the CSS as Less
#import (less) './A.css';