-
Notifications
You must be signed in to change notification settings - Fork 26.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
ab88936
commit 6db44f8
Showing
16 changed files
with
4 additions
and
246 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,18 +1,4 @@ | ||
[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-external-scoped-css) | ||
## Scoped Style with external CSS file | ||
The motivation for this example is using scoped css from external files and in the end generate a compiled static `.css` file to use in production.. | ||
|
||
#### Running That | ||
# With external scoped css | ||
|
||
``` | ||
yarn install | ||
yarn start | ||
``` | ||
|
||
#### Supported Langs | ||
The plugin supports the `less`, `scss` and `css` file extensions. It is possible to add support for another pre-processor by creating a function to compile the code. In the example we use `sass` as our css pre-processor | ||
|
||
You need to edit the `.babelrc` and sometimes the `pre-processor.js` to work with another languages, if you want to use SCSS the solution and explanation (fit with other css-pre-processors) are in this issue <3 [#3053](https://github.com/zeit/next.js/issues/3053) | ||
|
||
#### Attention Points | ||
- Next.js doesn't have support for watching `*.css files. So you will have to edit a Javascript file to re-compile the css. In the future this will be fixed by [#823](https://github.com/zeit/next.js/pull/823). | ||
This example has been deprecated in favor of [@zeit/next-css](https://github.com/zeit/next-plugins/tree/master/packages/next-css). |
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,45 +1,3 @@ | ||
[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-scoped-stylesheets-and-postcss) | ||
# Scoped stylesheets with PostCSS example | ||
# Scoped stylesheets and PostCSS | ||
|
||
This is an example of using scoped stylesheets and PostCSS, heavily influenced by @davibe's [`with-global-stylesheet`](https://github.com/zeit/next.js/tree/master/examples/with-global-stylesheet). | ||
|
||
## How to use | ||
|
||
### Using `create-next-app` | ||
|
||
Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: | ||
|
||
``` | ||
npm i -g create-next-app | ||
create-next-app --example with-scoped-stylesheets-and-postcss with-scoped-stylesheets-and-postcss-app | ||
``` | ||
|
||
### Download manually | ||
|
||
Download the example [or clone the repo](https://github.com/zeit/next.js): | ||
|
||
```bash | ||
curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-scoped-stylesheets-and-postcss | ||
cd with-scoped-stylesheets-and-postcss | ||
``` | ||
|
||
To get this example running you must | ||
|
||
npm install . | ||
npm run dev | ||
|
||
Visit [http://localhost:3000](http://localhost:3000) and try edit `pages/styles.css`. Your changes should be picked up instantly. | ||
|
||
Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) | ||
|
||
```bash | ||
now | ||
``` | ||
|
||
# Why | ||
|
||
Scoped CSS is neat and keeps your JS clean. PostCSS is amazing for extended features, such as nesting. CSS Modules keep your class names “local”. | ||
|
||
# Known issues | ||
|
||
Composed CSS files are not watched by next.js, and thus, if you change one, nothing will happen. You'll need to edit a JS file or the CSS file you're composing for it to hot reload. | ||
This example has been deprecated in favor of the [@zeit/next-css](https://github.com/zeit/next-plugins/tree/master/packages/next-css#postcss-plugins) module. |
44 changes: 0 additions & 44 deletions
44
examples/with-scoped-stylesheets-and-postcss/next.config.js
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
3 changes: 0 additions & 3 deletions
3
examples/with-scoped-stylesheets-and-postcss/pages/global.css
This file was deleted.
Oops, something went wrong.
10 changes: 0 additions & 10 deletions
10
examples/with-scoped-stylesheets-and-postcss/pages/index.js
This file was deleted.
Oops, something went wrong.
4 changes: 0 additions & 4 deletions
4
examples/with-scoped-stylesheets-and-postcss/pages/styles.css
This file was deleted.
Oops, something went wrong.
9 changes: 0 additions & 9 deletions
9
examples/with-scoped-stylesheets-and-postcss/postcss.config.js
This file was deleted.
Oops, something went wrong.