So I'm working on an existing angular-ionic application, using : angular 12 and ionic 5.
I need to use an external library used exclusively to generate styles, imported in the node_modules.
There is only one file to import which contains all the elements needed in the application, with a bit of the code included as follow :
custom-css-library/dist/lib.css
.theme-one,
:root {
--bg-primary: 0, 40, 87;
--bg-secondary: 115, 154, 188;
--success: 34, 197, 94;
--error: 239, 68, 68;
}
.theme-two{
--bg-primary: 207, 16, 45;
--bg-secondary: 204, 204, 204;
--success: 34, 197, 94;
--error: 239, 68, 68;
}
.btn--primary {
--tw-border-opacity: 1;
--tw-bg-opacity: 1;
--tw-text-opacity: 1;
background-color: rgba(var(--bg-primary), var(--tw-bg-opacity));
border-color: rgba(var(--bg-primary), var(--tw-border-opacity));
color: rgba(var(--primary-contrast), var(--tw-text-opacity));
}
I have imported this file in the global.scss file :
/* External CSS*/
#import 'custom-css-library/dist/lib.css';
And then used the main class on my tag in the index.html
<bodyclass="theme-one">
<app-root></app-root>
</body>
All seems to work as intended when I use the basic classes. My troubles start when I try to directly reference the variables.
For instance, when needing to display en error message, I tried this in the page :
page.html
<div>
<p class="custom-error">Some custom error</p>
</div>
page.scss
.custom-error {
color: var(--error);
}
The color is not taken into account, and the developer console displays on error on the "style" tab :
--error is not defined
What am I missing to correctly declare/import the file in order to load the variables in my scss files?
I think you need to configure the angular.json file like this.
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"your-project": {
"projectType": "application",
....
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
.....
"styles": [
{
"input": "src/theme/variables.scss"
},
{
"input": "node_modules/..../yourstuff.css"
},
....
Also, it would be great if you can provide stackblitz link or codesandbox. We can see your problem easier and can solve it more quickly.
Related
Each time I add a new class to the index.html file, I need to rebuild the output.css file manually.
The package.json file:
{
"name": "tailwind-practice",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "npx tailwindcss --watch -i ./input.css -o ./output.css"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"tailwindcss": "^3.1.7"
}
}
The tailwind.config.js file:
/** #type {import('tailwindcss').Config} */
module.exports = {
screens: {
'sm': '480px',
'md': '768px',
'lg': '1440px',
},
content: ['./index.html'],
theme: {
extend: {},
},
plugins: [],
}
I am supposed to run npm run build once, and each time I saved the html file, tailwind is supposed to add my new classes to output.css. But it doesn't. I checked the file after saving index.html and I couldn't find my new classes there. But the CLI shamelessly said it rebuilt it in 20ms. I needed to run npm run build each time to successfully build my css file. Also, I deleted my previous nodejs installation and reinstalled the current version, updated VS Code, updated Google Chrome, and now, I am considering moving back to Windows from Manjaro.
Edit: A useful observation.
After saving index.html, the CLI said this:
Rebuilding...
Done in 27ms.
But when I stopped the process and reran npm run build, it said:
Rebuilding...
Done in 198ms.
There is a relatively huge time delay when it actually works.
Edit 2:
It works when I save index.html multiple times rapidly.
I moved from Manjaro to Ubuntu, and it still doesn't work!
You need to add these to your input.css to make the --watch work properly.
#tailwind base;
#tailwind components;
#tailwind utilities;
Without these, TW won't know from where it should pull info for your CSS classes and write a processed version in output.css
Let's say you wrote <h1 class="underline">Hello world! </h1> in index.html.
Tw needs to look for information on how it can parse + process the underline class and what should be written in output.css regarding this class.
Try it and let me know if it works.
try changing
from
npx tailwindcss --watch -i ./input.css -o ./output.css
to
npx tailwindcss -i ./input.css -o ./output.css --watch
Assuming this is how you think Tailwind CLI works:
This is your input.css:
.aaa {
color: blue;
}
This is your index.html:
...
<div class="aaa">AAA</div>
You execute npm run build
You go to index.html and add an HTML element with some Tailwind class
...
<div class="aaa">AAA</div>
<div class="font-bold">BBB</div>
You expect your output.css to be magically built into this:
.aaa {
color: blue;
}
.font-bold {
font-weight: 700;
}
This is how Tailwind CLI actually works:
In your input.css you have to first specify which Tailwind layers you think you will use in your index.html. Let's add a layer called utilities which enables you to use Tailwind classes such as font-bold, underline, etc.
#tailwind utilities;
.aaa {
color: blue;
}
You execute npm run build
You go to index.html and add an HTML element with some Tailwind class which belongs to the utilities layer
...
<div class="aaa">AAA</div>
<div class="font-bold">BBB</div>
You go to output.css et voila - the Tailwind class is there:
.font-bold {
font-weight: 700;
}
.aaa {
color: blue;
}
You add another Tailwind class from the utilities layer
...
<div class="aaa">AAA</div>
<div class="font-bold underline">BBB</div>
et voila:
.font-bold {
font-weight: 700;
}
.underline {
-webkit-text-decoration-line: underline;
text-decoration-line: underline;
}
.aaa {
color: blue;
}
I have a problem with custom css in tailwind and vite.
My maian.js look like:
import "./styles.css";
// import "tailwindcss/tailwind.css";
document.querySelector("#app").innerHTML = `
<h1>Hello Vite!</h1>
Documentation
`;
My styles.css looks like:
#tailwind base;
#tailwind components;
#tailwind utilities;
.header-nav-section {
#apply bg-gradient-to-br from-gray-100e to-gray-300;
}
But vscode informed me that:
What is wrong, I readed documentation and this case will working.
P.S
Full repo:
https://github.com/mxcdh/vite-tailwind
Follow the following steps
Add the the following Custom Data for CSS file css_custom_data.json.
Declare it into the VSCode settings file.
.vscode/settings.json:
{
"css.customData": [".vscode/css_custom_data.json"]
}
.vscode/css_custom_data.json:
{
"version": 1.1,
"atDirectives": [
{
"name": "#tailwind",
"description": "Use the `#tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
"references": [
{
"name": "Tailwind Documentation",
"url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
}
]
},
{
"name": "#responsive",
"description": "You can generate responsive variants of your own classes by wrapping their definitions in the `#responsive` directive:\n```css\n#responsive {\n .alert {\n background-color: #E53E3E;\n }\n}\n```\n",
"references": [
{
"name": "Tailwind Documentation",
"url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
}
]
},
{
"name": "#screen",
"description": "The `#screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n#screen sm {\n /* ... */\n}\n```\n…gets transformed into this:\n```css\n#media (min-width: 640px) {\n /* ... */\n}\n```\n",
"references": [
{
"name": "Tailwind Documentation",
"url": "https://tailwindcss.com/docs/functions-and-directives#screen"
}
]
},
{
"name": "#variants",
"description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `#variants` directive:\n```css\n#variants hover, focus {\n .btn-brand {\n background-color: #3182CE;\n }\n}\n```\n",
"references": [
{
"name": "Tailwind Documentation",
"url": "https://tailwindcss.com/docs/functions-and-directives#variants"
}
]
}
]
}
If thisn't work , Try to update your node.js to the latest current stable version and try again
Does your tailwind work? Could just be a faulty installation.
Otherwise try installing the official vscode extension or disable custom at rules validation
If you are working in VSCode, you need to disable the lint rule of unknownAtRules.
RECOMMENDED FIX:
Create .vscode at the root of your project
Create file named settings.json
Identify the filetype you are using for example css or scss
Create an empty json object {}
Inside json object add, "[FILE EXTENSION OF STEP 3].lint.unknownAtRules": "ignore"
here is how the file will look like in the case of scss extension:
.vscode > settings.json
{
"scss.lint.unknownAtRules": "ignore"
}
It helps you push the change in git and share the fix with the team.
SECOND WAY:
Do the same as explained above inside your VSCode Global settings.json. It will fix the problem for you but not for others using the same codebase. You can open the file by using, Cmd+Shift+P and then choosing "Preferences: Open Settings (JSON)".
Usually, it fixes the issue right away, but you can reload browser if needed.
Fix: For vue use "css.lint.unknownAtRules": "ignore". Credits => #zijizhu
https://github.com/tailwindlabs/tailwindcss/discussions/5258
https://flaviocopes.com/fix-unknown-at-rule-tailwind/#:~:text=Here's%20how%20to%20fix%20this,Done!
I am working with a React component that uses different opacity values according to whether there is support for the CSS backdrop-filter directive:
background={(() => {
const opacity = isBackdropFilterSupported() ? 0.75 : 0.98
return (
`linear-gradient(
180deg, rgba(76, 63, 143, ${opacity}) 62.76%,
rgba(184, 169, 255, ${opacity}) 100%
)`
)
})()}
The issue is that the site is generated server-side using Next.js. CSS.supports('backdrop-filter', 'blur(1px)') returns false on the server, so the value is always false regardless of the client properties.
One solution would be to use CSS like:
.drawer {
--opacity: 0.75;
background: linear-gradient(
180deg, rgba(76, 63, 143, var(--opacity)) 62.76%,
rgba(184, 169, 255, var(--opacity)) 100%
);
}
#supports not (backdrop-filter: blur(1px)) {
.drawer { --opacity: 0.98; }
}
This should be interpreted by the client and avoid the server-side rendering issue, but I've found no indication as to how to integrate such a style into Chakra-UI which this is build on.
I didn't mention it in my original post, but I was getting an error like: Prop id did not match. Server: "toggle--gxfg3t7xwo" Client: "toggle--ki0j10p2l".
It turns out this means that the DOM generated by the browser doesn't match the DOM generated by Next.js. When this happens Next.js gives up on trying to rehydrate the document which is why I was getting the server-rendered values.
The solution was to use a hook to determine when the component was mounted (which only happens on the client). That hook looks like:
export const useMounted = () => {
// https://www.joshwcomeau.com/react/the-perils-of-rehydration/
const [hasMounted, setHasMounted] = React.useState(false);
React.useEffect(() => {
setHasMounted(true);
}, []);
return hasMounted;
};
The opacity determination then became:
const hasMounted = useMounted()
⋮
const opacity = hasMounted && isBackdropFilterSupported() ? 0.75 : 0.98
I added this css
high {
background-color: red;
}
medium {
background-color: yellow;
}
low {
background-color: whitesmoke;
}
to wwwroot\css\Site.css, and when I publish the application with dotnet publish, I can see the minified css file is being referenced but it does not contain these new styles.
bundleconfig.json
// Configure bundling and minification for the project.
// More info at https://go.microsoft.com/fwlink/?LinkId=808241
[
{
"outputFileName": "wwwroot/css/site.min.css",
// An array of relative input file paths. Globbing patterns supported
"inputFiles": [
"wwwroot/css/site.css"
]
},
{
"outputFileName": "wwwroot/js/site.min.js",
"inputFiles": [
"wwwroot/js/site.js"
],
// Optionally specify minification options
"minify": {
"enabled": true,
"renameLocals": true
},
// Optionally generate .map file
"sourceMap": false
}
]
Why is this happening? How can I ensure that this bundle config is being applied?
I found this link useful, where it mentioned the need to add the BuildBundlerMinifier package to the project.
So after calling
dotnet add package BuildBundlerMinifier
dotnet restore
I can see my css updates in the .min.css file
I am trying to develop a web application using sass and reactjs.
The Sass structure is like the one in the image attached.
Image - ![1]: http://i.imgur.com/1XPwP87.png
The library.scss and settings.scss file is imported in the styles.scss file.
Inside each reactjs component, I have a js, scss, css.
MainLayout (Component)
MainLayout.js
MainLayout.css
MainLayout.scss
Now, all the breakpoints, grids, etc generated in the "style.css" file and I want to use it in the "MainLayout.scss".
So, in the "MainLayout.scss" file, I did
#import '../../assets/css/styles.scss';
.main-content {
display: flex;
flex-wrap: wrap;
#include from-breakpoint(tablet-portrait) {
position: relative;
}
}
But, I get this error stated below :
=> changed: C:\projects\vliegtickets-frontend\src\components\MainLayout\MainLayout.scss
{
"status": 1,
"file": "C:/projects/vliegtickets-frontend/src/components/MainLayout/MainLayout.scss",
"line": 53,
"column": 14,
"message": "no mixin named grid-desktop\n\nBacktrace:\n\tsrc/components/MainLa
yout/MainLayout.scss:53, in mixin #content\n\tsrc/assets/css/library/_breakpoi
nts.scss:16, in mixin from-breakpoint\n\tsrc/components/MainLayout/MainLayout.
scss:52",
"formatted": "Error: no mixin named grid-desktop\n\n
Backtrace:\n
\tsrc/components/MainLayout/MainLayout.scss:53, in mixin #content\n \tsr
c/assets/css/library/_breakpoints.scss:16, in mixin from-breakpoint\n \t
src/components/MainLayout/MainLayout.scss:52\n on line 53 of src/componen
ts/MainLayout/MainLayout.scss\n>> \t\t\t\t#include grid-desktop;\n -----------
--^\n"
}
Can someone please help me with this ? What should I do to to make my "scss" files inside the components make use of the "style.scss"?