Comments (22)
Looking good!!
I think you are adding you own postcss-loader
for .css
files which picks up your config. But you can also modify the existing rule with the following code. It will look for a tailwind.js
file on root in your project.
chainWebpack: config => {
config.module
.rule('css') // or sass, scss, less, postcss, stylus
.oneOf('normal') // or module
.use('postcss-loader')
.tap(options => {
options.plugins.push(tailwindcss('./tailwind.js'))
return options
})
},
We are going to make this easier :)
from gridsome.
Woooo! I got it working.
I probably did it totally wrong and did some damage, but for now it allows me to run my CSS through PostCSS :)
Here's what I added to my
gridsome.config.js
file. Please know this code is probably not the proper implementation, but it got me where I wanted for my weekend fun project..chainWebpack: config => { config.module .rule('postcss-loader') .test(/\.css$/) .use(["tailwindcss", "autoprefixer"]) .loader('postcss-loader') },
Hey @simonswiss, would you consider posting that little starter as a repo?
from gridsome.
@Devportobello I guess so although you could also do something like this if you don't wanna get rid of whatever is already there (right now it's just Autoprefixer but I guess there could be other things at some point or in some projects):
chainWebpack: config => {
config.module
.rule('postcss') // css, sass, scss, less, postcss, stylus
.oneOf('normal') // normal, module
.use('postcss-loader')
.tap(options => {
options.plugins.unshift(...[
require('postcss-import'),
require('tailwindcss')(config.tailwind),
])
if (process.env.NODE_ENV === 'production') {
options.plugins.push(...[
require('@fullhuman/postcss-purgecss')(config.purgecss),
])
}
return options
})
},
from gridsome.
Woooo! I got it working.
I probably did it totally wrong and did some damage, but for now it allows me to run my CSS through PostCSS :)
Here's what I added to my gridsome.config.js
file. Please know this code is probably not the proper implementation, but it got me where I wanted for my weekend fun project..
chainWebpack: config => {
config.module
.rule('postcss-loader')
.test(/\.css$/)
.use(["tailwindcss", "autoprefixer"])
.loader('postcss-loader')
},
from gridsome.
This is how I use PurgeCSS:
- Install purgecss with
npm install purgecss
- Create
purgecss.config.js
in the root of project and add to it:
module.exports = {
content: [
'./dist/**/*.html',
'./dist/assets/js/*.js'
],
css: [
'./dist/assets/css/*.css'
],
rejected: true
}
- Add next script into
package.json
:"purgecss": "node_modules/purgecss/bin/purgecss --config ./purgecss.config.js --out ./dist/assets/css"
- Modify
build
script:"build": "gridsome build && npm run purgecss"
For me works perfectly for deleting unused CSS of fontawesome
library, but also should work with other packages. Reduced one of .css
bundles size from 60K
to 8K
.
from gridsome.
Thank you :)
Looks like the postcss-loader
isn't picking up your config because gridsome is adding the autoprefixer plugin. The plan is to have a postcss option in gridsome.config.js, but the option is not implemented yet. We can consider not adding custom postcss options in the webpack config, and take full advantage of the postcss-load-config
module instead. But for now you can add options with chainWebpack
. The rule name is postcss-loader
.
from gridsome.
Works beautifully! Thanks you 🎉
from gridsome.
What kind of errors? So you have a public repo we can take a look at? I have almost no experience with webpack but everything's working fine for me here: https://github.com/hacknug/klayaya
from gridsome.
Ah, I was super close - I played with the .tap()
options modifier but couldn't find the right syntax / chain order.
Thanks for that, much cleaner solution! I will try it and then close the issue! 😁
from gridsome.
question about using 'chainWebpack', is this overriding gridsome default postcss ? seems no more autoprefixer when using
from gridsome.
It should keep autoprefixer if you push your own plugins to options.plugins
without overriding it.
from gridsome.
When using code posted in your comment : #9 (comment), i dont see any css prefixed in the output css after build :/
EG:
display: flex;
By default, did i need to add .browserslistrc or something ?
from gridsome.
@Devportobello That's probably because autoprefixer
is the first plugin inside the array.
from gridsome.
@hacknug Damn, so i need to reorder to keep autoprefixer in the last call ?
from gridsome.
Hi,
firstly I would like to thank you for this amazing tool that you created!
I am trying to get everything up and running with Tailwind and Purgecss. The example that @hacknug provided is partially working. If I leave it like it is, it will purge css, but Tailwind does not seem to work.
If I change .rule('postcss') to .rule('css) Tailwind does work, but can not run build.
I don't have much experience with Webpack and I would be really thankful for a working example (maybe a whole Gridsome repo).
from gridsome.
@Jurero123 .rule('language')
will let webpack know which type of files to look for. I like writing postCSS on files with the .pcss
extension to make sure no one expects that CSS to work without processing it somehow first. You can use css
if that's the extension of the file where you have your Tailwind directives.
You can see the extensions that will match for your config here:
gridsome/gridsome/lib/webpack/createBaseConfig.js
Lines 131 to 141 in ffb29ee
from gridsome.
@hacknug thank for a prompt reply.
Ok, that part is now working fine, but I am still getting errors related to Purgecss, but I guess I will have to take some time and dive into Webpack / Postcss.
from gridsome.
Thank for sharing the repo. I will take a look before bothering you any more with this. 👍
UPDATE: the only difference was in "purgcecss.config.js". Now it simply works! Thanks a lot! I really appreciate it!
from gridsome.
Ahhhhhhh. I know what might be the issue. Having purgcecss.config.js
worked for me just like having purgecss' config directly inside chainWebpack
. Having the config in a variable and referencing that wouldn't work for some reason. Didn't bothered debugging since this solved my issue but maybe it'd be a good idea to open an issue if it really is one.
Is that what you were doing? (having the config object in a variable outside chainWebpack
)
from gridsome.
To be honest I tried so many things that I am not sure anymore what I was trying. And my first commit was just after I got it to work by comparing it to your project.
from gridsome.
Hey, still need some help. I'm trying to add some plugins to postCSS, however the processor is not compiled well.
gridsome.config.js
const postcssPlugins = [
require('postcss-mixins'),
require('autoprefixer'),
require('postcss-nesting'),
require('postcss-custom-media'),
require('postcss-hexrgba'),
require('postcss-automath')
]
module.exports = {
siteName: 'gridsome-postcss',
plugins: [],
chainWebpack: config => {
config.module
.rule('postcss-loader')
.oneOf('normal')
.test(/\.css$/)
.use(postcssPlugins)
.loader('postcss-loader')
}
}
postcss.config.js
const config = {
plugins: [
require('postcss-mixins'),
require('autoprefixer'),
require('postcss-nesting'),
require('postcss-hexrgba'),
require('postcss-automath'),
require('postcss-critical-split')({
'output': process.env.ENV === 'production' ? 'rest' : 'input',
'startTag': 'defer:start',
'endTag': 'defer:end',
'blockTag': 'defer'
})
]
}
module.exports = config
from gridsome.
@khoipro not sure if you solved or not but ideally you'll either push
or unshift
postcss plugins to whatever's already on Gridsome's config like shown here: https://github.com/brandonpittman/gridsome-plugin-tailwindcss/blob/master/gridsome.server.js#L27-L42
from gridsome.
Related Issues (20)
- Dynamic pages using templates HOT 1
- error while using gridsome/vue-remark
- Load content within content container
- Gridsome i18n dynamic router with dot doesnt work HOT 1
- Gridsome is not really static and titles don't work when refreshing HOT 1
- Create a section that doesnt reload when you switch from page
- gridsome build stuck HOT 2
- how to use @gridsome/transformer-remark to marked
- An error which says "Failed to process image xxxx" happened when run gridsome build
- Google Analytics 4? HOT 1
- Will Gridsome continue to have support and updates? Or will it become a deprecated technology? HOT 4
- Gridsome build stucked
- Building with dynamically generated pages for tags fails.
- Google Tag Manager tag is not firing when viewing the page; we have to reload the page. HOT 1
- [remark-wiki-link] Warning: please upgrade to remark 13 to use this plugin
- Gridsome build error HOT 1
- Gridsome airtable requires update as API key will be depricated from Feb 2024
- Questions about adding properties to the page-query list HOT 1
- Is there a way to merge grid some into nuxt? HOT 1
- Build error HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from gridsome.