I'm trying to style my FullCalendar according to technique 2 as described in this documentation. It says I should use PostCSS with postcss-custom-properties and postcss-calc.
My project uses Parcel for bundling and not WebPack like FullCalendar do in their examples, but from my understanding, using PostCSS in Parcel should just be plug-and-play by including a postcss.config.js file, so I figured it shouldn't be a huge issue. Here's what that file looks like:
module.exports = {
plugins: [
require('autoprefixer')({
"grid": true
}),
require('postcss-custom-properties')({
preserve: false,
importFrom: [
'src/style/fullcalendar-vars.css'
]
}),
require('postcss-postcss-calc')
]
};
So I have a file src/style/fullcalendar-vars.css. For the purpose of testing, it looks like this:
:root {
--fc-button-bg-color: red;
}
But nothing changes. When I look in the dev tools, there are no CSS variables set. Did I miss something?
I don't know if I can give you more information, I can't share a Stackblitz or anything else afaik, because the proplem lies in the building process. But I can link to the github repository where I am right now so you can look in other files and see what can be wrong https://github.com/WestCoastJitterbugsOrg/Personalized-Calendar/tree/c7633401cb1bb50488e11d0d306cb11333961f2d
Thank you!
I think the issue was that I used scss for everything else. A much simpler solution was to change the file extension of fullcalendar-vars.css to scss and import it in main.scss. No hassle, everything works like a charm! Finally I can have my pretty bright red buttons ;)
Related
I am putting Tailwind in an Angular project. I have what I think is the most standard configuration (default one, only changed the colors) :
tailwind.config.js
module.exports = {
content: [
join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
...createGlobPatternsForDependencies(__dirname),
],
theme: {
[...]
},
plugins: [],
}
Yet, I face problems when I use a CSS class for the first time. For example mt-10.
It seems that tailwind uses the glob pattern to detect the used css properties and create a CSS on the flight when the server starts. Is that correct ?
If I understand it correctly, it seems to make sense in order to avoid having a huge CSS file with tons of properties that are not used.
But it means that if I don't use this class at the moment I start the server, then it won't be available after a live reload. If I want to use a css class for the first time, it seems that I have to restart the server to have it detected before being able to use it, which is irritating.
Is it possible to deactivate this behavior in development ? It seems to me that it should be possible to build the huge CSS once for all in dev. Is there an option for that ?
I'm using TailwindCSS, I want a separate stylesheet CSS file for each of my web pages. like
about.html - about.min.css
portfolio.html - portfolio.css
First you should ask yourself why do you want to do this? Creating a separate style-sheet for each individual page (home, about, etc) is not really common. The focus is on re-usability and possibly only adding additional styles.
If you are concerned about the file size, then do not integrate Tailwind via CDN but build your own style. Then you have access to the purge function. Purge kicks out all unused styles and the result is a very small CSS file.
You can use:
const mix = require('laravel-mix')
mix.postCss('input.css', 'output.css', [
require('tailwindcss')`enter code here`('./tailwind.config.js'),
require('autoprefixer')
])
.postCss('input.css', 'output-pdf.css', [
require('tailwindcss')('./tailwind-custom.config.js'),
require('autoprefixer')
])
You'll need to install TailwindCSS as PostCSS plugin as well as postcss-import and autoprefixer. Then create postcss.config.js in root directory and add:
module.exports = {
plugins: {
'postcss-import': {},
tailwindcss: {},
autoprefixer: {},
}
}
then you can add as many css files as needed in your css directory, albeit with some concerns following this documentation
Keep in mind, you should only use one css for all pages in your web unless you have multiple projects with different styling required.
If you want multiple CSS output , then you should not be using Tailwind for your project.
This is my first time installing and running tailwind CSS. I follow the instructions and did everything accordingly but then it started showing some warnings like below
Can you tell me why I am getting these warnings and anyway for me to fix them? As I am worried that my generated CSS will be missing styles So help is needed to fix it
Also, can I keep the tailwind CSS in watch mode? Please give me the command line or video or explain to me the way to fix it? Thank you in advance!
This warning occurred because you did not use any of the tailwind classes, causing tailwind to suspect that the project config was not implemented correctly.
https://tailwindcss.com/docs/installation
Make sure you don't have repeated properties in your Tailwind config file. After upgrading from v2 to v3, Accidently I had put two content properties. Other than that make sure you have done migration properly.
framework guide: https://tailwindcss.com/docs/installation/framework-guides
upgrade guide: https://tailwindcss.com/docs/upgrade-guide
It's look like you dont have the tailwind config file. Take a look in your root folder if you have. If not you can create one by this command: npx tailwindcss init
Then the tailwind cli will create the tailwind.config.js file. It looks like:
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
https://tailwindcss.com/docs/installation
I am trying to import the .css from full-calendar package.
First, I created a new component my-calendar (html, scss, ts).
Then, I tried 3 different ways but only the last one worked for me:
Reference the file directly, as the documentation suggested, in the index.html (it does not work because the reference to node_modules is lost when you build the project)
<link href="node_modules/fullcalendar/dist/fullcalendar.min.css" rel="stylesheet">
Adding #import "~fullcalendar/dist/fullcalendar.min.css"; in my-calendar.scss. If I am not wrong, this should add the style into main.css when the project is being built (is not working)
Create custom copy config (copy.config.js)
module.exports = {
...
copyFullCalendar: {
src: ['{{ROOT}}/node_modules/fullcalendar/dist/fullcalendar.min.css'],
dest: '{{BUILD}}'
}
}
and adding #import "fullcalendar.min.css"; into my-calendar.scss
UPDATE:
and adding #import "fullcalendar"; into my-calendar.scss
to avoid compiler errors when use ionic build --aot --minifycss --minifyjs
I would appreciate if someone could clarify the best way and explain if I misunderstood some concept.
PS: Remember that I am working with Ionic3 and I am not using the Angular CLI.
third method of yours will be the best way to implement , but it can be done in another way more like ionic.
You need to make use of the includePaths when configuring the custom path , as we are dealing with custom css, add sass.config.js to local project folder where we configure custom includePaths like this
includePaths: [
....
'node_modules/ap-angular2-fullcalendar'
],
In package.json scripts to include custom css configuration file, like this:
"scripts": {
.....
"ionic:serve": "ionic-app-scripts serve -s ./config/sass.config.js"
},
Only problem with this implementation is when you update ionic-app-scripts you have to compare the native sass.config.js file to the local file and check if there is anything changed.
This is a troublesome method and an issue was raised in Github but unfortunately they closed the issue with the following justification
Configs are extended, so only include the fields that you're changing.
Everything else will inherit the defaults.
As of #ionic/app-scripts : 3.2.0, it seems you'll still need to
#include FILE; somewhere
See this closed issue on app script's github
I found that as of
'Ionic Framework : ionic-angular 3.9.2'
you have two choices insert your import in src/theme/variables.scss or src/app/app.scss.
For example in variables.scss
/* some declarations here */
#import 'insrctest';/*file sits in src/test/insrctest.scss*/
And in my custom.config.js
includePaths: [
'node_modules/ionic-angular/themes',
'node_modules/ionicons/dist/scss',
'node_modules/ionic-angular/fonts',
'./src/test', /* when the import above gets called, node-sass will look in here */
I recently scaffolded a new webapp with Yeoman (1.4.5). In my Gruntfile.js I have set the following config:
...
// Compiles Sass to CSS and generates necessary files if requested
sass: {
options: {
lineNumbers:true,
sourceMap: true,
includePaths: ['bower_components']
}
...
Even though Grunt (grunt-cli v0.1.13) handles my instructions without errors and everything is running smoothly, unfortunately no SASS line numbers are showing up in my compiled CSS files?
Am I missing something or is this an issue with the grunt-sass node package? I would like to keep my automated task instructions centralized in my gruntfile.js. Any help would be greatly appreciated!
The right option is:
sourceComments: true
Looking at grunt-sass documentation, it looks like the option are only passed to node-sass directly. Add it doesn't looks like node-sass support these options - or not in the way you've written it.
I'd suggest reading the documentation to figure out the correct way to pass these arguments https://github.com/sass/node-sass#options