mirror of
https://github.com/Aviortheking/next-pre-css.git
synced 2025-04-28 05:42:14 +00:00
Compare commits
No commits in common. "main" and "v0.0.1" have entirely different histories.
69
README.md
69
README.md
@ -1,69 +1,2 @@
|
|||||||
# next-pre-css
|
# next-pre-css
|
||||||
Adds support for both Stylus & Less CSS pre-processing in NextJS v10+.
|
Adds support for both Stylus & Less CSS preprocessing in NextJS
|
||||||
|
|
||||||
## 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,5 +5,6 @@
|
|||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"repository": "git@github.com:eshinn/next-pre-css.git",
|
"repository": "git@github.com:eshinn/next-pre-css.git",
|
||||||
"author": "Eric Shinn <eric.shinn@gmail.com>",
|
"author": "Eric Shinn <eric.shinn@gmail.com>",
|
||||||
"license": "MIT"
|
"license": "MIT",
|
||||||
|
"private": true
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user