mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
Add example with-scoped-stylesheets-and-postcss
(#1146)
* Add example `with-external-stylesheets-and-postcss` * 🔥 Remove extra semi-colon * 📝 Attribute `with-global-stylesheet` * Force a new test * 📝 Update README.md * Rename `external` -> `scoped`
This commit is contained in:
parent
45de5b8374
commit
6e5d57dae9
10
examples/with-scoped-stylesheets-and-postcss/.babelrc
Normal file
10
examples/with-scoped-stylesheets-and-postcss/.babelrc
Normal file
|
@ -0,0 +1,10 @@
|
||||||
|
{
|
||||||
|
"presets": [
|
||||||
|
"next/babel"
|
||||||
|
],
|
||||||
|
"plugins": [
|
||||||
|
["wrap-in-js", {
|
||||||
|
"extensions": ["css$"]
|
||||||
|
}]
|
||||||
|
]
|
||||||
|
}
|
53
examples/with-scoped-stylesheets-and-postcss/README.md
Normal file
53
examples/with-scoped-stylesheets-and-postcss/README.md
Normal file
|
@ -0,0 +1,53 @@
|
||||||
|
# Scoped stylesheets with PostCSS example
|
||||||
|
|
||||||
|
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
|
||||||
|
|
||||||
|
Download the example [or clone the repo](https://github.com/zeit/next.js):
|
||||||
|
|
||||||
|
```bash
|
||||||
|
curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/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 bugs
|
||||||
|
|
||||||
|
There's a bug, possibly within `next.js`, making composition between files unuseable. Consider the following:
|
||||||
|
|
||||||
|
*`styles.css`*
|
||||||
|
```css
|
||||||
|
.paragraph {
|
||||||
|
composes: font-sans from '../global.css';
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
*`global.css`*
|
||||||
|
```css
|
||||||
|
.font-sans {
|
||||||
|
font-family: georgia; /* ;) */
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
The following error is thrown:
|
||||||
|
|
||||||
|
```
|
||||||
|
Module build failed: Error: Cannot find module '-!./../node_modules/css-loader/index.js??ref--6-4!./../node_modules/postcss-loader/index.js!../global.css'
|
||||||
|
```
|
43
examples/with-scoped-stylesheets-and-postcss/next.config.js
Normal file
43
examples/with-scoped-stylesheets-and-postcss/next.config.js
Normal file
|
@ -0,0 +1,43 @@
|
||||||
|
module.exports = {
|
||||||
|
webpack: (config) => {
|
||||||
|
config.module.rules.push(
|
||||||
|
{
|
||||||
|
test: /\.css$/,
|
||||||
|
use: [
|
||||||
|
{
|
||||||
|
loader: 'emit-file-loader',
|
||||||
|
options: {
|
||||||
|
name: 'dist/[path][name].[ext]'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'raw-loader',
|
||||||
|
'val-loader',
|
||||||
|
{
|
||||||
|
loader: 'skeleton-loader',
|
||||||
|
options: {
|
||||||
|
procedure: (content) => (
|
||||||
|
`${content} \n` + ['module.exports = {',
|
||||||
|
'stylesheet: module.exports.toString(),',
|
||||||
|
'classNames: exports.locals',
|
||||||
|
'}'
|
||||||
|
].join('')
|
||||||
|
)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
loader: 'css-loader',
|
||||||
|
options: {
|
||||||
|
modules: true,
|
||||||
|
minimize: true,
|
||||||
|
importLoaders: 1,
|
||||||
|
localIdentName: '[local]-[hash:base64:5]'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'postcss-loader'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
return config
|
||||||
|
}
|
||||||
|
}
|
27
examples/with-scoped-stylesheets-and-postcss/package.json
Normal file
27
examples/with-scoped-stylesheets-and-postcss/package.json
Normal file
|
@ -0,0 +1,27 @@
|
||||||
|
{
|
||||||
|
"name": "next.js-with-scoped-stylesheets-and-postcss",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "next dev",
|
||||||
|
"build": "next build",
|
||||||
|
"start": "next start"
|
||||||
|
},
|
||||||
|
"author": "Thomas Lindstrøm <t@hom.as>",
|
||||||
|
"license": "ISC",
|
||||||
|
"dependencies": {
|
||||||
|
"babel-plugin-wrap-in-js": "^1.1.1",
|
||||||
|
"css-loader": "^0.26.1",
|
||||||
|
"next": "^2.0.0-beta.26",
|
||||||
|
"postcss-cssnext": "^2.9.0",
|
||||||
|
"postcss-loader": "^1.3.0",
|
||||||
|
"raw-loader": "^0.5.1",
|
||||||
|
"react": "^15.4.2",
|
||||||
|
"react-dom": "^15.4.2",
|
||||||
|
"skeleton-loader": "0.0.7",
|
||||||
|
"val-loader": "^0.5.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"now": "^3.1.0"
|
||||||
|
}
|
||||||
|
}
|
10
examples/with-scoped-stylesheets-and-postcss/pages/index.js
Normal file
10
examples/with-scoped-stylesheets-and-postcss/pages/index.js
Normal file
|
@ -0,0 +1,10 @@
|
||||||
|
import React from 'react'
|
||||||
|
import Head from 'next/head'
|
||||||
|
import {stylesheet, classNames} from './styles.css'
|
||||||
|
|
||||||
|
export default () => (
|
||||||
|
<p className={classNames.paragraph}>
|
||||||
|
<Head><style dangerouslySetInnerHTML={{__html: stylesheet}} /></Head>
|
||||||
|
bazinga
|
||||||
|
</p>
|
||||||
|
)
|
|
@ -0,0 +1,4 @@
|
||||||
|
.paragraph {
|
||||||
|
font-size: 20px;
|
||||||
|
color: red;
|
||||||
|
}
|
|
@ -0,0 +1,5 @@
|
||||||
|
module.exports = {
|
||||||
|
plugins: [
|
||||||
|
require('postcss-cssnext')()
|
||||||
|
]
|
||||||
|
}
|
Loading…
Reference in a new issue