I have included css files in to nuxtJs config file,
so i want to minify them but i do not want to extract them to external css file.
Is there any way of doing this?.
Code
/*
** Global CSS
*/
css: [
"~/assets/css/tailwind.css",
"~/assets/scss/styles.scss",
"~/static/js/plugins/slick/slick.css",
"~/static/js/plugins/fotorama/fotorama.css",
"swiper/dist/css/swiper.css"
],
build: {
extractCSS: false,
}
You can use PurgeCSS and the module for NuxtJS
Related
I'm configuring the stylelints for the styles in my Vue project. For the independent .css and .scss files, I did this using stylelint-scss package. But I'm facing difficulty to configure this for the style tags written inside my vue component like below.
<script setup lang="ts">
defineProps({})
</script>
<template class="container">
<p>Sample p tag</p>
</template>
<style lang="scss" scoped>
.container {
p {
color: white;
}
#media (min-width: 500px) { // Prohibited as per scss/media-feature-value-dollar-variable rule
color: green;
}
}
</style>
I have to run stylelint for the styles written inside <style lang="scss" scoped></style> tag
To lint CSS, SCSS and SCSS within Vue SFCs, you can use Stylelint's overrides configuration property to extend a combination of shared configs:
stylelint-config-standard - the official standard config (maintained by the Stylelint team)
stylelint-config-standard-scss - an adaption of the standard config for linting SCSS (maintained by the SCSS community)
stylelint-config-standard-vue - an adaption of the standard config for linting Vue SFCs (maintained by the Vue community)
First, install the dependencies:
npm i --save-dev postcss-html stylelint-config-standard-vue stylelint-config-standard stylelint-config-standard-scss
Then update your Stylelint configuration to:
{
"extends": ["stylelint-config-standard"]
"overrides": [
{
"files": ["*.scss", "**/*.scss"],
"extends": ["stylelint-config-standard-scss"]
},
{
"files": ["*.vue", "**/*.vue"],
"extends": [
"stylelint-config-standard-scss",
"stylelint-config-standard-vue/scss"
]
}
]
}
Finally, run Stylelint on your CSS, SCSS and Vue files:
npx stylelint "**/*.{css,scss,vue}"
This configuration tells Stylelint to use the official config for CSS files, the SCSS community config for SCSS files and both the SCSS and Vue community configs for SCSS within Vue files.
For the independent .css and .scss files, did this using stylelint-scss package
The stylelint-config-standard-scss shared config bundles the stylelint-scss plugin pack for you, so you don't need to include it in your configuration.
Each community config also bundles the relevant custom syntax for each language or container: postcss-scss and postcss-html for SCSS and Vue files, respectively.
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 have edit the angular.json styleext for using less
"schematics": {
"#schematics/angular:component": {
"prefix": "app",
"styleext": "less"
},
"#schematics/angular:directive": {
"prefix": "app"
}
}
I create a component and test the less it works. But now i want to mix the component css/less with the bootgstrap classes.
For example I want all button in my component to have .mx-1
I type in my less:
.btnmx-1{
.btn();
.mx-1();
}
but it failed. I tried to import :
#import "../../../../node_modules/bootstrap/dist/css/bootstrap.min.css";
.btnmx-1{
.btn();
.mx-1();
}
this one also failed to compile with error : .btn is undefined
How to fix this ? I want all buttons in my component to have margin left and right 1px inherited from bootstrap
For Bootsrap:
npm install bootsrap --save
in angular.json:
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.css",
"src/styles.scss"
],
For less:
add less file type instead css (by default)
comp.component.less
in angular.json.
Set the property defaults.styleExt to less.
Here's how I use bootstrap in my project
Download bootstrap Source files from link: https://getbootstrap.com/docs/4.0/getting-started/download/
create styles folders in your project copy scss folder from resource to it and rename it to bootstrap to more clearly
create your own mixin and import it bootstrap.scss file(below all of the existing imports)
import bootstrap.scss to style.scss(or in angular.json)
In my case, I just want to use bootstrap utils classes like padding, margin,heading...so I just keep these files in my boostrap scss folder
If you need all just keep all or remove some modules that need bootstrap js to run like carousel....
When using nuxt generate I am generating various HTML pages that happen to be about 300 kB in size. Majority of the file is CSS style placed inline to it. Is it a way to put it in an external file and reduce size of HTML ?
You can extract the CSS in the main chunk into a separate CSS file using
nuxt.config.js
module.exports = {
build: {
extractCSS: true
}
}
This is documented here
If you want to import css files globally use
module.exports = {
css: [
// Load a Node.js module directly (here it's a Sass file)
'bulma',
// CSS file in the project
'#/assets/css/main.css',
// SCSS file in the project
'#/assets/css/main.scss'
]
}
as documented here
Gruntfile.js
In my Gruntfile.js I have following for the watch task:
watch: {
css: {
files: ['sass/**/*.scss'],
tasks: ['compass'],
options: {
spawn: false,
}
},
/* More watched tasks bellow */
}
SASS
My sass folder has one main file and folder for include files like this:
/sass/main.scss
/sass/includes/file.scss
CSS
And when the watch auto generate everything in my destination folders I have:
/css/main.css /* it includes everything from the main.scss including all #imports */
/css/includes/file.css /* includes stylesheets from the imported file. But this is useless file and /include/ folder is also an extra, that I do not need. */
I suppose it's an issue in the config line:
files: ['sass/**/*.scss']
but I do not know how to describe to in a way I get only one css folder and one main.css file without extra folders and files
You should change names of your includes files:
/sass/includes/file.scss -> /sass/includes/_file.scss
More information you can find here :
http://sass-lang.com/documentation/file.SASS_REFERENCE.html#partials