Skip to content

Commit 9ee88e7

Browse files
benatkinbenatkin
committed
use css-loader with codemirror
1 parent 2415682 commit 9ee88e7

File tree

5 files changed

+26
-14
lines changed

5 files changed

+26
-14
lines changed

Diff for: ‎apps/next/components/code-with-codemirror.js

+2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import React, { Component } from 'react'
22
import {UnControlled as CodeMirror} from 'react-codemirror2'
33
import 'codemirror/mode/javascript/javascript'
4+
import 'codemirror/lib/codemirror.css'
5+
import 'codemirror/theme/material.css'
46

57
export default (props) => (
68
<div>

Diff for: ‎apps/next/pages/codemirror.js

-5
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,10 @@
11
import dynamic from 'next/dynamic'
22
const CodeWithCodemirror = dynamic(import('../components/code-with-codemirror'), {ssr: false})
3-
import Head from 'next/head'
43
import Nav from '../components/nav'
54

65
export default () => {
76
return (
87
<div>
9-
<Head>
10-
<link key="codemirror-css-lib" rel="stylesheet" href="https://unpkg.com/codemirror@5.33.0/lib/codemirror.css" />
11-
<link key="codemirror-css-theme-material" rel="stylesheet" href="https://unpkg.com/codemirror@5.33.0/theme/material.css" />
12-
</Head>
138
<CodeWithCodemirror value={"for (var i=0; i < 10; i++) {\n console.log(i)\n}"} />
149
<Nav/>
1510
</div>

Diff for: ‎docs/codemirror-with-next.md

+22-7
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# CodeMirror with Next
22

3-
[![live demo](https://img.shields.io/badge/live-demo-green.svg?style=plastic)](https://resourcessnippets-next-hqozwsosfk.now.sh/codemirror)
3+
[![live demo](https://img.shields.io/badge/live-demo-green.svg?style=plastic)](https://resourcessnippets-next.now.sh/codemirror)
44

55
## create & configure the app
66

@@ -13,7 +13,7 @@ create-next-app myapp
1313
Install the CodeMirror dependencies:
1414

1515
``` bash
16-
npm install react-codemirror2 codemirror --save
16+
npm install react-codemirror2 codemirror @zeit/next-css css-loader --save
1717
```
1818

1919
## add the component
@@ -24,6 +24,8 @@ npm install react-codemirror2 codemirror --save
2424
import React, { Component } from 'react'
2525
import {UnControlled as CodeMirror} from 'react-codemirror2'
2626
import 'codemirror/mode/javascript/javascript'
27+
import 'codemirror/lib/codemirror.css'
28+
import 'codemirror/theme/material.css'
2729

2830
export default (props) => (
2931
<div>
@@ -37,6 +39,24 @@ export default (props) => (
3739
)
3840
```
3941

42+
## Set up the CSS loader for webpack
43+
44+
[next.config.js](https://github.com/resources/snippets/blob/master/apps/next/next.config.js)
45+
46+
``` js
47+
const withCSS = require('@zeit/next-css')
48+
module.exports = withCSS({
49+
webpack: (config) => {
50+
// Fixes npm packages that depend on `fs` module
51+
config.node = {
52+
fs: 'empty'
53+
}
54+
55+
return config
56+
}
57+
})
58+
```
59+
4060
## add the component to a page
4161

4262
To use this component, use a dynamic import with `ssr` set to `false`:
@@ -46,15 +66,10 @@ To use this component, use a dynamic import with `ssr` set to `false`:
4666
``` jsx
4767
import dynamic from 'next/dynamic'
4868
const CodeWithCodemirror = dynamic(import('../components/code-with-codemirror'), {ssr: false})
49-
import Head from 'next/head'
5069

5170
export default () => {
5271
return (
5372
<div>
54-
<Head>
55-
<link key="codemirror-css-lib" rel="stylesheet" href="https://unpkg.com/codemirror@5.33.0/lib/codemirror.css" />
56-
<link key="codemirror-css-theme-material" rel="stylesheet" href="https://unpkg.com/codemirror@5.33.0/theme/material.css" />
57-
</Head>
5873
<CodeWithCodemirror value={"for (var i=0; i < 10; i++) {\n console.log(i)\n}"} />
5974
</div>
6075
)

Diff for: ‎docs/leaflet-with-next.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Leaflet with Next
22

3-
[![live demo](https://img.shields.io/badge/live-demo-green.svg?style=plastic)](https://resourcessnippets-next-hqozwsosfk.now.sh/leaflet)
3+
[![live demo](https://img.shields.io/badge/live-demo-green.svg?style=plastic)](https://resourcessnippets-next.now.sh/leaflet)
44

55
## create & configure the app
66

Diff for: ‎docs/monaco-editor-with-next.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Monaco Editor with Next.js
22

3-
[![live demo](https://img.shields.io/badge/live-demo-green.svg?style=plastic)](https://resourcessnippets-next-hqozwsosfk.now.sh/monaco)
3+
[![live demo](https://img.shields.io/badge/live-demo-green.svg?style=plastic)](https://resourcessnippets-next.now.sh/monaco)
44

55
This uses [@timkendrick/monaco-editor](https://github.com/timkendrick/monaco-editor)
66
which has support for the combination of WebPack and a node-like browser environment

0 commit comments

Comments
 (0)