mirror of
https://github.com/Aviortheking/next-pre-css.git
synced 2025-04-25 12:22:12 +00:00
Compare commits
3 Commits
Author | SHA1 | Date | |
---|---|---|---|
|
8912ae3616 | ||
|
0aef4ace6f | ||
|
8b839ad62a |
69
README.md
69
README.md
@ -1,2 +1,69 @@
|
||||
# next-pre-css
|
||||
Adds support for both Stylus & Less CSS preprocessing in NextJS
|
||||
Adds support for both Stylus & Less CSS pre-processing in NextJS v10+.
|
||||
|
||||
## Step 1 - Install next-pre-css & Your Choice of Flavor
|
||||
|
||||
### for Stylus?
|
||||
Install both Stylus and the Stylus loader for Webpack:
|
||||
```
|
||||
$ npm i -D stylus stylus-loader next-pre-css
|
||||
```
|
||||
|
||||
__NOTE:__ Stylus-Loader v5 drops support for Webpack 4 (which is the default for NextJS v10)
|
||||
You can opt-in to Webpack5 as noted both on [this page](https://nextjs.org/docs/messages/webpack5) as well as the example illustrated below.
|
||||
If, however, you wish to stay on Webpack 4 - then you'll need Stylus-Loader v4:
|
||||
```
|
||||
$ npm i -D stylus-loader^4.3.3
|
||||
```
|
||||
|
||||
### for Less?
|
||||
Install both Less and the Less loader for Webpack:
|
||||
```
|
||||
$ npm i -D less less-loader next-pre-css
|
||||
```
|
||||
|
||||
## Step 2 - Setup your NextJS Config
|
||||
If you don't already have a [NextJS Config](https://nextjs.org/docs/api-reference/next.config.js/introduction), create one.
|
||||
```
|
||||
touch next.config.js
|
||||
```
|
||||
In the config, `require()` the next-pre-css module and wrap your config with it as follows.
|
||||
```
|
||||
const addSupport = require('next-pre-css')
|
||||
|
||||
module.exports = addSupport({
|
||||
|
||||
/* To opt-in to using Webpack5 in NextJS */
|
||||
future: { webpack5: true },
|
||||
|
||||
webpack: (config, options) => {
|
||||
|
||||
/* ...and the rest of your custom webpack config goes here. */
|
||||
|
||||
return config;
|
||||
},
|
||||
})
|
||||
```
|
||||
As an extra example; adding GraphQL and the GraphQL-Tag loader (because why not?):
|
||||
```
|
||||
const addSupport = require('next-pre-css')
|
||||
|
||||
module.exports = addSupport({
|
||||
webpack: (config, options) => {
|
||||
config.module.rules.push({
|
||||
test: /\.(graphql|gql)$/,
|
||||
exclude: /node_modules/,
|
||||
loader: 'graphql-tag/loader',
|
||||
})
|
||||
return config
|
||||
},
|
||||
webpackDevMiddleware: (config) => {
|
||||
return config
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
## Step 3 - Um... Do Your Thing.
|
||||
Begin working w/ the same pleasentries that NextJS provides Sass with (such as [component-level styling](https://nextjs.org/docs/basic-features/built-in-css-support#adding-component-level-css) like: `mah-css.module.styl` or `mah-css.module.less`, but for the pre-processor that _you_ prefer. Under-the-hood, this module does little more than modify the webpack rules NextJS sets for Sass & CSS to include both Stylus and Less. So that's it.
|
||||
|
||||
Hence forth, Go Nuts!
|
||||
|
@ -5,6 +5,5 @@
|
||||
"main": "index.js",
|
||||
"repository": "git@github.com:eshinn/next-pre-css.git",
|
||||
"author": "Eric Shinn <eric.shinn@gmail.com>",
|
||||
"license": "MIT",
|
||||
"private": true
|
||||
"license": "MIT"
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user