mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
Remove with-global-stylesheet example (#4913)
* Deprecate with-global-stylesheet example Use @zeit/next-css instead https://github.com/zeit/next-plugins/tree/master/packages/next-css RELATED ISSUE: #4902 * Deprecate with-global-stylesheet-simple example Use @zeit/next-css instead https://github.com/zeit/next-plugins/tree/master/packages/next-css RELATED ISSUE: #4902
This commit is contained in:
HaNdTriX
Tim Neutkens
parent
b50bad56be
commit
9018da11ca
|
|
@ -1,12 +0,0 @@
|
|||
{
|
||||
"plugins": [
|
||||
[
|
||||
"inline-import",
|
||||
{
|
||||
"extensions": [".css"]
|
||||
}
|
||||
]
|
||||
],
|
||||
"presets": ["next/babel"],
|
||||
"ignore": []
|
||||
}
|
||||
|
|
@ -1,89 +1,3 @@
|
|||
[](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-global-stylesheet-simple)
|
||||
# Global Stylesheet simple example
|
||||
|
||||
# Global Stylesheet Example (Simple Version - CSS inside `node_modules`)
|
||||
|
||||
## How to use
|
||||
|
||||
### Using `create-next-app`
|
||||
|
||||
Execute [`create-next-app`](https://github.com/segmentio/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:
|
||||
|
||||
```bash
|
||||
npx create-next-app --example with-global-stylesheet-simple with-global-stylesheet-simple-app
|
||||
# or
|
||||
yarn create next-app --example with-global-stylesheet-simple with-global-stylesheet-simple-app
|
||||
```
|
||||
|
||||
### Download manually
|
||||
|
||||
Download the example:
|
||||
|
||||
```bash
|
||||
curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-global-stylesheet-simple
|
||||
cd with-global-stylesheet-simple
|
||||
```
|
||||
|
||||
Install it and run:
|
||||
|
||||
```bash
|
||||
npm install
|
||||
npm run dev
|
||||
# or
|
||||
yarn
|
||||
yarn dev
|
||||
```
|
||||
|
||||
Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
|
||||
|
||||
```bash
|
||||
now
|
||||
```
|
||||
|
||||
## The idea behind the example
|
||||
|
||||
This is an example of importing a CSS file located inside `node_modules` (ones you downloaded using `npm` or `yarn`).
|
||||
|
||||
This would be useful for importing CSS libraries such as [`normalize.css`](https://necolas.github.io/normalize.css/).
|
||||
|
||||
### What if I want to import my own CSS, such as `styles/foo.css`?
|
||||
|
||||
Check out the [with-global-stylesheet](../with-global-stylesheet) example.
|
||||
|
||||
### How It Works
|
||||
|
||||
* Install `babel-plugin-inline-import` using `npm` or `yarn`
|
||||
* Then, add this to your `.babelrc`:
|
||||
|
||||
```js
|
||||
{
|
||||
"plugins": [
|
||||
[
|
||||
"inline-import",
|
||||
{
|
||||
"extensions": [".css"]
|
||||
}
|
||||
]
|
||||
],
|
||||
"presets": ["next/babel"],
|
||||
"ignore": []
|
||||
}
|
||||
```
|
||||
|
||||
* Install any CSS library using `npm` or `yarn`. In this example, I installed [`tachyons`](https://tachyons.io/).
|
||||
* Import the CSS file. Here, I'm importing a CSS file located at `node_modules/tachyons/css/tachyons.min.css`.
|
||||
|
||||
```js
|
||||
import tachyons from "tachyons/css/tachyons.min.css";
|
||||
```
|
||||
|
||||
* Add it globally using `styled-jsx`:
|
||||
|
||||
```js
|
||||
<style jsx global>
|
||||
{tachyons}
|
||||
</style>
|
||||
```
|
||||
|
||||
### Result ([`index.js`](pages/index.js)):
|
||||
|
||||
|
||||
This example has been deprecated. Please use [examples/with-next-css](../with-next-css) instead.
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 103 KiB |
|
|
@ -1,14 +0,0 @@
|
|||
{
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next"
|
||||
},
|
||||
"dependencies": {
|
||||
"babel-plugin-inline-import": "^2.0.6",
|
||||
"next": "latest",
|
||||
"react": "^16.0.0",
|
||||
"react-dom": "^16.0.0",
|
||||
"tachyons": "^4.8.1"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
import React from 'react'
|
||||
import tachyons from 'tachyons/css/tachyons.min.css'
|
||||
|
||||
const SomeComponent = () =>
|
||||
<div className='sans-serif'>
|
||||
<article className='br2 ba dark-gray b--black-10 mv4 w-100 w-50-m w-25-l mw5 center'>
|
||||
<img src='http://placekitten.com/g/600/300' className='db w-100 br2 br--top' alt='Photo of a kitten looking menacing.' />
|
||||
<div className='pa2 ph3-ns pb3-ns'>
|
||||
<div className='dt w-100 mt1'>
|
||||
<div className='dtc'>
|
||||
<h1 className='f5 f4-ns mv0'>Cat</h1>
|
||||
</div>
|
||||
<div className='dtc tr'>
|
||||
<h2 className='f5 mv0'>$1,000</h2>
|
||||
</div>
|
||||
</div>
|
||||
<p className='f6 lh-copy measure mt2 mid-gray'>
|
||||
If it fits, i sits burrow under covers. Destroy couch leave hair everywhere,
|
||||
and touch water with paw then recoil in horror.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
export default () =>
|
||||
<div>
|
||||
<SomeComponent />
|
||||
<style jsx global>{tachyons}</style>
|
||||
</div>
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
{
|
||||
"plugins": [
|
||||
[
|
||||
"module-resolver", {
|
||||
"root": ["."],
|
||||
"alias": {
|
||||
"styles": "./styles"
|
||||
},
|
||||
"cwd": "babelrc"
|
||||
}],
|
||||
[
|
||||
"wrap-in-js",
|
||||
{
|
||||
"extensions": ["css$", "scss$"]
|
||||
}
|
||||
]
|
||||
],
|
||||
"presets": [
|
||||
"next/babel"
|
||||
],
|
||||
"ignore": []
|
||||
}
|
||||
|
|
@ -1,72 +1,3 @@
|
|||
[](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-global-stylesheet)
|
||||
# Global Stylesheet Example
|
||||
|
||||
# Global Stylesheet example
|
||||
|
||||
This is an example of how you can include a global stylesheet in a next.js webapp.
|
||||
|
||||
## How to use
|
||||
|
||||
### Using `create-next-app`
|
||||
|
||||
Execute [`create-next-app`](https://github.com/segmentio/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:
|
||||
|
||||
```bash
|
||||
npx create-next-app --example with-global-stylesheet with-global-stylesheet-app
|
||||
# or
|
||||
yarn create next-app --example with-global-stylesheet with-global-stylesheet-app
|
||||
```
|
||||
|
||||
### Download manually
|
||||
|
||||
Download the example:
|
||||
|
||||
```bash
|
||||
curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-global-stylesheet
|
||||
cd with-global-stylesheet
|
||||
```
|
||||
|
||||
To get this example running you just need to
|
||||
|
||||
```bash
|
||||
npm install
|
||||
npm run dev
|
||||
# or
|
||||
yarn
|
||||
yarn dev
|
||||
```
|
||||
|
||||
Visit [http://localhost:3000](http://localhost:3000) and try to modify `styles/index.scss` changing color. Your changes should be picked up instantly.
|
||||
|
||||
Also see it working with plain css here
|
||||
|
||||
|
||||
Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
|
||||
|
||||
```bash
|
||||
now
|
||||
```
|
||||
|
||||
## The idea behind the example
|
||||
|
||||
The strategy here is to transpile the stylesheet file to a css-in-js file so that it can be loaded and hot reloaded both on the server and the client. For this purpose I created a babel loader plugin called [babel-loader-wrap-in-js](https://github.com/davibe/babel-plugin-wrap-in-js).
|
||||
|
||||
Another babel plugin [module-resolver](https://github.com/tleunen/babel-plugin-module-resolver) enables us to import stylesheets from js (e.g. pages or components) through a `styles` directory alias rather than relative paths.
|
||||
|
||||
The `sass-loader` is configured with `includePaths: ['styles', 'node_modules']` so that your scss can `@import` from those places, again without relative paths, for maximum convenience and ability to use npm-published libraries. Furthermore, `glob` paths are also supported, so one could for example add `'node_modules/@material/*'` to the `includePaths`, which would make [material-components-web](https://github.com/material-components/material-components-web) (if you'd like) even easier to work with.
|
||||
|
||||
Furthermore, PostCSS is used to [pre-process](https://medium.com/@ddprrt/deconfusing-pre-and-post-processing-d68e3bd078a3) both `css` and `scss` stylesheets, the latter after Sass pre-processing. This is to illustrate `@import 'normalize.css';` from `node_modules` thanks to `postcss-easy-import`. [Autoprefixer](https://github.com/postcss/autoprefixer) is also added as a "best practice". Consider [cssnext](http://cssnext.io) instead, which includes `autoprefixer` as well as many other CSS spec features.
|
||||
|
||||
This project shows how you can set it up. Have a look at:
|
||||
|
||||
* .babelrc
|
||||
* next.config.js
|
||||
* pages/index.js
|
||||
* postcss.config.js
|
||||
* styles/index.scss
|
||||
|
||||
Please, report any issue on enhancement related to this example to its original
|
||||
github repository https://github.com/davibe/next.js-css-global-style-test
|
||||
|
||||
## If your stylesheets import fonts
|
||||
|
||||
Install `postcss-url` and insert `require('postcss-url')({ url: 'inline' })` as the 2nd element of the `plugins` array in `postcss.config.js`.
|
||||
This example has been deprecated. Please use [examples/with-next-css](../with-next-css) instead.
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 140 KiB |
|
|
@ -1,36 +0,0 @@
|
|||
const path = require('path')
|
||||
const glob = require('glob')
|
||||
|
||||
module.exports = {
|
||||
webpack: (config, { dev }) => {
|
||||
config.module.rules.push(
|
||||
{
|
||||
test: /\.(css|scss)/,
|
||||
loader: 'emit-file-loader',
|
||||
options: {
|
||||
name: 'dist/[path][name].[ext]'
|
||||
}
|
||||
}
|
||||
,
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: ['babel-loader', 'raw-loader', 'postcss-loader']
|
||||
}
|
||||
,
|
||||
{
|
||||
test: /\.s(a|c)ss$/,
|
||||
use: ['babel-loader', 'raw-loader', 'postcss-loader',
|
||||
{ loader: 'sass-loader',
|
||||
options: {
|
||||
includePaths: ['styles', 'node_modules']
|
||||
.map((d) => path.join(__dirname, d))
|
||||
.map((g) => glob.sync(g))
|
||||
.reduce((a, c) => a.concat(c), [])
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
)
|
||||
return config
|
||||
}
|
||||
}
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
{
|
||||
"name": "with-global-stylesheet",
|
||||
"version": "1.0.0",
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start"
|
||||
},
|
||||
"author": "Davide Bertola <dade@dadeb.it>",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"autoprefixer": "7.1.5",
|
||||
"babel-plugin-module-resolver": "^3.1.1",
|
||||
"babel-plugin-wrap-in-js": "^1.1.0",
|
||||
"glob": "^7.1.2",
|
||||
"next": "latest",
|
||||
"node-sass": "^4.4.0",
|
||||
"normalize.css": "^7.0.0",
|
||||
"postcss-easy-import": "^3.0.0",
|
||||
"postcss-loader": "^2.0.7",
|
||||
"raw-loader": "^0.5.1",
|
||||
"react": "^16.0.0",
|
||||
"react-dom": "^16.0.0",
|
||||
"sass-loader": "^6.0.6"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
import React from 'react'
|
||||
|
||||
import stylesheet from 'styles/index.scss'
|
||||
// or, if you work with plain css
|
||||
// import stylesheet from 'styles/index.css'
|
||||
|
||||
export default () =>
|
||||
<div>
|
||||
<style dangerouslySetInnerHTML={{ __html: stylesheet }} />
|
||||
<p>ciao</p>
|
||||
</div>
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
module.exports = {
|
||||
plugins: [
|
||||
require('postcss-easy-import')({prefix: '_'}), // keep this first
|
||||
require('autoprefixer')({ /* ...options */ }) // so imports are auto-prefixed too
|
||||
]
|
||||
}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
@import 'normalize.css';
|
||||
|
||||
p {
|
||||
font-size: xx-large;
|
||||
color: black;
|
||||
}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
@import 'normalize.css';
|
||||
|
||||
$primary-color: black;
|
||||
|
||||
p {
|
||||
font-size: xx-large;
|
||||
color: $primary-color;
|
||||
}
|
||||
Loading…
Reference in a new issue