While using the latest version of postcss-import, I've noticed that it only allows #import statements at the top of the files similar to this:
#import "button.css;
.some-class {
color: red;
}
My question here is, is there some way to configure postcss-import to allow #import statements anywhere in the file? Similar to this:
.some-class {
color: red;
}
#import "button.css;
I'm aware this goes against the upcoming CSS standard. However, I believe I've seen this live in a project and I'm curious how to configure this. This is my postcss.config.js file:
module.exports = {
plugins: [
require('postcss-import'),
]
}
Thanks
Related
I'm using Flowbite (both JS and CSS) in my application. JS was inserted and works (using Webpack and import 'flowbite' in the entry point JS).
For the CSS, I'm using this in the tailwind.config.js file as the documentation tells you to do.
module.exports = {
content: ['./src/**/*.{html,js}'],
theme: {
extend: {}
},
plugins: [
require('flowbite/plugin')
]
}
However when compiling everything (npx tailwind build) the CSS doesn't seem to be included in the final CSS file.
I can tell because the FlowBite modal should have a dark background (making everything except the modal darker), but that background does not appear when creating the compiled CSS.
When I do include the flowbite.css manually though, it does render correctly. So the current working solution I have is (in my HTML):
<!-- TODO: Adding the plugin in tailwind.config.js does not work -->
<link rel="stylesheet" href="https://unpkg.com/flowbite#latest/dist/flowbite.min.css" />
But I'd like to have it compiled automatically from the Tailwind build command.
Someone in the Discord community answered to me directly. I had to include this:
module.exports = {
content: ['./src/**/*.html', './node_modules/flowbite/**/*.js'],
plugins: [
require('flowbite/plugin')
]
}
The './node_modules/flowbite/**/*.js' in content was missing.
Tried many way doesn't work.
So I have quick fix, add this css:
.h-modal{
background-color: rgba(0,0,0,0.3);
}
I cannot find a good way to scope tailwind CSS when including it in a system where I don't want it to apply globally that works with custom build options.
Essentially I want to do this:
.tailwind{
#import "tailwindcss/base";
#import "tailwindcss/components";
#import "tailwindcss/utilities";
}
But PostCSS importer doesn't like this due to the fact it imports before the tailwind placeholders are replaced. So the only way to make it work is to break the build into 2 stages then import the compiled css like:
.tailwind{
#import "tailwindcss.css";
}
It works but it breaks some of the css rules which show up in dev tools.
Is there a better way to scope tailwind to stop it interfering with other systems?
I've found that you can use postcss-nested for this. Install the plugin, add it as the first plugin to your PostCSS config file and this should work:
.tailwind {
#tailwind base;
#tailwind components;
#tailwind utilities;
#tailwind screens;
}
From the docs...
The prefix option allows you to add a custom prefix to all of Tailwind's generated utility classes. This can be really useful when layering Tailwind on top of existing CSS where there might be naming conflicts.
For example, you could add a tw- prefix by setting the prefix option like so:
// tailwind.config.js
module.exports = {
prefix: 'tw-',
}
You will achieve this by setting important in the tailwind config to your parent class or id. See docs.
// tailwind.config.js
module.exports = {
important: '.tailwind',
}
Unfortunately, this seems to only be affecting the components and utilities styles... the base styles will remain unaffected.
As requested leaving my answer here:
I used the prefix as suggested by Lanny
// tailwind.config.js
module.exports = {
prefix: 'tw-',
}
And then made my tailwind css file like this:
#import "tailwindcss/components";
#import "tailwindcss/utilities";
Then I just manually copied any base styles that I wanted manually into my main css file and manually changed anything that conflicted.
I think the tricky part here is actually about the preflight/reset.css. You want to fend off external styling from coming to your scope but also don't want to pollute the external system with your tailwind style.
My current set up include following steps:
In tailwind.config.js we disable the prefight, defining a prefix tw-, and adding an extra selector #app via option important. The last change will add an extra css selector to output, e.g. #app .tw-mb-4.
module.exports = {
important: '#app',
prefix: "tw-",
corePlugins: {
preflight: false,
},
Find and copy the content of base.css from node_modules folder before pasting it into a scss file with a parent selector #app. You can compile this using any online SCSS compiler. This will help you only reset styling within your scope.
#app {
/*content from base.css*/
}
Copy compiled the styling from #2 and paste to the beginning of your tailwind css file.
Structure the html so you contents are wrapped within a div with the id of #app.
Tailwind's important option doesn't seem to add selector to #layer component so you will have to include that in your component styling.
#layer components {
#app .page-h1 {
#apply tw-mt-0 tw-mb-2 tw-text-center tw-leading-8 tw-text-4xl md:tw-text-5xl;
}
}
According to the docs:
If you’d like to completely disable Preflight — perhaps because you’re integrating Tailwind into an existing project or because you’d like to provide your own base styles — all you need to do is set preflight to false in the corePlugins section of your tailwind.config.js file.
This seems to work with Wordpress in the admin but it does remove the normalization, like cursor: pointer on button hover, for example.
What I have done is this
module.exports = {
prefix: 'tw-',
content: [
"./src/**/*.{html,ts}",
],
theme: {
extend: {},
},
purge: {
enabled: true,
content: ['./src/**/*.{html,ts}']
},
plugins: [],
corePlugins: {
preflight: false,
}
}
It will reduce build size as ,I have purged CSS, disable global CSS,as I have used preflight, and now If u want to apply tailwind class use as
<div class="tw-m-4"></div>
As we have used tw in prefix
I'd like to define my own color variables in my SCSS, but how?
I checked this website and did everything that is described there.. but it doesn't work.
I have installed a preprocessor already!
Furthermore I tried to create a color-map and access the color with map-get.. doesn't work either.
colors.scss file
$yellow_100: #FFC819;
style.scss file with a colors.scss import
h1 {
color: $yellow_100;
}
I also tried this:
colors.scss file
$colors: (
color: #FFBB00
);
style.scss file
h1 {
color: map-get($colors, color);
}
Neither of them works.
SASS compiler preserves $ in output CSS and doesn't recognize $yellow_100 as a SASS variable. Use Interpolation to access variable's value instead of its name—just put it between #{ and }.
So your code should look like:
$yellow_100: #FFC819;
h1 {
color: #{$yellow_100};
}
Interpolation isn't used in old code examples. That's because SASS developers changed the syntax approximately in July, 2017, making interpolation mandatory for SASS variables. Here is more details on this.
Install sass with npm -g install sass
Create these two source files:
// _colors.scss
$yellow_100: #FFC819;
// style.scss
#import './colors';
h1 {
color: $yellow_100;
}
Execute sass ./style.scss ./output.css to compile your code
Add <link rel="stylesheet" type="text/css" href"[path to output.css]" /> to your HTML
Make sure you're using single colons to prefix your root header tag in your .scss files.
i.e :root{} and not ::root{}
I do already have SCSS variables defined in src/styles/settings/_variables.scss and I am importing them into src/styles.scss, but still these variables aren't available for every single component.
Is there any way to make a global file which holds all SCSS variables for the rest of my components? Because writing #import in every single component .scss file it is very frustrating, especially if I have many nested components.
I know, there is a lot of similar questions, but it seems like they're all outdated and do not relate to the recent versions of Angular.
I use Angular 7.3 with CLI.
You just need to add a little more config, so where you are declaring your global variables, you need to wrap it up in :root{}. So in src/styles/settings/_variables.scss.
:root
{
--blue: #00b; // or any global you wish to share with components
}
Then when you use them in the SCSS you will need to access them like so.
.example-class {
background-color: var(--blue)
}
To add to this regarding comments, this method can use mixins, #media and keyframes and is not limited to just colours / font. That was an example.
From my understanding you need a global file src/assets/style/global and then to import each scss file into there where you are defining them like so.
#import 'filename';
If you dont want global variables to be used in within a component look when you have the globals working. Look into ViewEncapsulation, as this can be used to ignore them.
Is there any ways to make global file with scss variables available for all components?
Without importing global file everytime in each component, you want those sass variables been available, it's not possible.
The way it works in SASS, if using partials to better organize code, you can apply #import directive for referencing. So if there're some sass variables in shared/_variables.scss:
$lightslategray: #778899;
$darkgray: #A9A9A9;
and these variables need to be used in another stylesheet, stylesheet with them must be #import-ed into it firstly:
// Shared
#import "shared/variables";
.content {
background: $lightslategray;
}
In Angular it works in a similar way (related referencing external stylesheet). So if you need some sass variables, mixins or functions to be used by a particular component.scss, there is no other clean way, but to reference them in that component.scss using #import directive. To ease the task, you can create a file src/_variables.scss and use syntax like this in your component.scss:
#import “~variables.scss”;
step one : go to custom scss file (shared/css/_variable.scss) and write this part
:root{
--color-text: red;
--color-btn-success: green;
}
after go to style.scss (this is main file) and import this file :
#import './shared/css/Variables';
now you can use variables in all components with this Syntax:
.sample{
color : var(--color-text);
}
Easily possibe to access sass style(s) from a global file with two steps.
Add folder path of the style files to includePaths array in angular.json file.
Import style file by file-name in any component.
let say your files and folder structures is as follows: src > my-styles-folder > var.scss
angular.json
"architect": {
"build": {
...
"options": {
"stylePreprocessorOptions": {
"includePaths": [
"src/my-styles-folder" // add path only, do not include file name
]
},
"styles": [
...
]
}
...
}
}
some-component.scss
#import "var"; // var.scss
mat-toolbar {
height: $toolbar-height;
}
In angular 8 work for me.
In your _variable.scss file you have to add:
:root{--my-var:#fabada}
After that go in your angular.json and add this in "styles":
{"input":"yourPath/_variables.scss"}
I am working with two web applications in the same repository, and need a way to 'namespace' the CSS class names for each application.
I am using LESS as my style preprocessor, and and using webpack to bundle all the LESS files into a single .css file which then gets loaded into the webpage via HTML.
What I am currently doing is manually prepending every CSS class with my namespace like so:
// mylessfile.less
.nmsp {
&__some-class-name {
color: blue;
}
}
this is annoying and not very maintainable.
Would something like this scale?:
// global.less
#my_namespace="nmsp";
// mylessfile.less
#import "global.less";
#my_namespace {
&__some-class-name {
color: blue;
}
}
Is there a way to do this via LESS or even Webpack?
Ideally I would like to use a namespace for app1, app2, and a "common" styles namespace for all the styles that both applications share.
SASS and LESS both support namespacing out of the box.
.app1-styles {
#import (app1) url("app1.css");
}
Webpack supports CSS Modules as a way to scope an app. Using CSS Modules gets you namespacing as well.
In your webpack config:
{
test: /\.css$/,
loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
}
Stuff inside the [ ] should be customized to your app.
Here's a demo project repo