I have a .scss file in src/assets/css/button.module.css
simplified content below
.btn:visited{
text-transform: uppercase;
text-decoration: none;
padding: 15px 40px;
}
I want to use this style in multiple components. How can i import the css to required component
I tried importing this in another scss as below
#import url('../../assets/css/button.module.scss');
But the the styles are not getting loaded. Any advice please
Try using
#import '../../assets/css/button.module.scss'
If does not work try using partials
Related
In my nextJS application, I need to load a stylesheet dynamically based on the user preference received from the database.
So, in my page, I'm adding it in the Head (next/head), as follows:
<Head>
<link rel="stylesheet" href={`/fonts/${type}/stylesheet.css`}></link>
</Head>
However, this is giving me a warning in the console in development mode:
Do not add stylesheets using next/head (see <link rel="stylesheet"> tag with href="/fonts/cal/stylesheet.css"). Use Document instead.
See more info here: https://nextjs.org/docs/messages/no-stylesheets-in-head-component
The stylesheet itself contains the font-face:
#font-face {
font-family: "Cal Sans";
src: url("CalSans-SemiBold.woff2") format("woff2"),
url("CalSans-SemiBold.woff") format("woff");
font-weight: 600;
font-style: normal;
font-display: swap;
}
Since the user's preference is stored in the database, and I receive this value via a query, I don't know how I can add it to the Document.js file.
I'll really appreciate any help on this.
While it might be possible to dynamically import a CSS file in your main app component (and you can check out an example in this guide), I would suggest a different solution.
Include all stylesheets in your application, but make its styles only apply when the html (or body) element has a certain class. Then all you need to do is modify that class based on user preference.
// styles.css
body.themeFoo #container {
// some styles...
}
This is how many implementations of dark mode work, e.g. in tailwind CSS. I believe this is a better pattern to solve your problem.
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html>
<Head>
<link rel="stylesheet" href="..." />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
This problem is resolved in the new Nextjs version where they provide support for Font Optimization, as documented here - https://nextjs.org/docs/basic-features/font-optimization
It also supports font self-hosting which was the key to my requirements.
I'm trying to change the app across the entire vue app, I have a custom scss file that is imported into main.ts in the app. So far I have this but don't think its working any suggestions?
$theme-colors: (
"primary": #5e72e4,
);
$vue-slider-mark-label: (
"font-size": 18px,
);
#import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
$body-font-family: 'Montserrat';
$font-size-root: 14px !default;
v-app {
font-family: $body-font-family !important;
}
#import "node_modules/bootstrap/scss/bootstrap";
#import "node_modules/bootstrap-vue/src/index.scss";
What you trying to do can be achieved by importing your google font inside of your <style> tag, in best case, in App.vue, your main component.
#import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
Then you can use it like this. Please not to not scope this attributes:
html, body {
font-family: 'Montserrat', sans-serif;
}
#app {
font-family: 'Montserrat', sans-serif;
}
I'm new to coding js, and am trying to use GSAP to animate some code. I cannot get anything to move or do any function. I don't have any errors when I compile my file. Also, I cannot get anything to animate on my CodePen, which I have been trying to use to see if I can try to do anything that might work. My html and css are working fine. I don't know what might be the problem?
CodePen:
https://codepen.io/ashleynw1800/pen/VwaRGBX
HTML:
<!-- Font Awesome-->
<script src="https://kit.fontawesome.com/3c79b583ac.js" crossorigin="anonymous"></script>
<!-- Google Fonts-->
<link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap" rel="stylesheet">
<section class="section-1">
<div id="hello-container">
<h1 class="hello"> hello!</h1>
</div>
<div id="happy-container">
<i class="fa fa-smile-o" aria-hidden="true"></i>
</div>
</section>
CSS:
/* =============
Demo
============= */
.section-1{
display: grid;
grid-template-areas: ". hello happy .";
grid-template-columns: "auto 2fr 1fr auto";
background-color: #E6EBFF;
}
#hello-container{
grid-area: hello;
align-self: center;
}
.hello{
font-size: 150px;
font-family: 'Abril Fatface', cursive;
color: #FF4F2D;
}
#happy-container{
grid-area: happy;
align-self: center;
color: #FF89FF;
font-size: 150px;
}
JS(I have taken all out except for one basic line to try to get anything to work):
import {gsap} from "gsap";
gsap.to(".hello", {duration:2, alpha:0})
"Your mistake" ==> Wrong implementation of the module idea/concept:
The module to import from. This is often a relative or absolute path
name to the .js file containing the module.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#:~:text=To%20dynamically%20import%20a%20module,js')%20.
Installation by CDN (Codepen). Remove import {gsap} from "gsap"; and the code will work fine. Otherwise, you get this error:
Uncaught TypeError: Failed to resolve module specifier "gsap"
In general, it is very useful to inspect your code and check for console errors.
https://developers.google.com/web/tools/chrome-devtools/console
Related article:
Failed to resolve module specifier
https://medium.com/#samichkhachkhi/failed-to-resolve-module-specifier-23fae20222df
Loading GSAP using modules tutorial:
https://greensock.com/docs/v3/Installation#npm
I'm using angular-translate in my Angular application.
And I want to change the importing scss files based on the current selected languge
#import 'partials/reset';
#import 'partials/variables_ar'; <--------- OR
#import 'partials/variables_en'; <--------- Based on $translate.use();
#import 'partials/mixins';
#import 'partials/angular-material-extend';
#import 'partials/layouts-template';
#import 'partials/layouts-page';
#import 'partials/animations';
#import 'partials/colors';
#import 'partials/icons';
Since SASS is built at compile time, not run time, you can't achieve what you're trying to do that way.
I think the best approach for you is to change the class based on the user's selected language, and then style your webapp depending on that class. For example your HTML:
<body class="{{ languageCode }}">
<header>My Header</header>
</body>
and your SCSS:
body.en {
header { color: blue; }
}
body.fr {
header { color: red; }
}
I am trying to bundle my css like below.
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/styles.css"));
But when i run the code i get this.
JavaScript critical error at line 1, column 1 in
http://localhost:49934/Content/css?v=8I6_j_wgn_9yNhfGU_-N-R8Ya98JN2nc600cBlm8VBM1
SCRIPT1002: Syntax error
Assuming my css had some funny characters or invalid paths, i removed everything except the below. It still did not work
.full {
height: 100%;
}
.content {
padding-top: 52px;
padding-right: 10px;
padding-left: 55px;
width: 100%;
}
When i disable bundling, add the link the usual way like below, it works
<link href="~/Content/styles.css" rel="stylesheet" type="text/css" />
I googled and most of the links talk about javascript error in javascript. I dont know why i am getting Javascript error in css.
Any help will be appreciated.