diff --git a/examples/with-global-stylesheet/.babelrc b/examples/with-global-stylesheet/.babelrc new file mode 100644 index 00000000..4df8f5d5 --- /dev/null +++ b/examples/with-global-stylesheet/.babelrc @@ -0,0 +1,14 @@ +{ + "plugins": [ + [ + "wrap-in-js", + { + "extensions": ["css$", "scss$"] + } + ] + ], + "presets": [ + "next/babel" + ], + "ignore": [] +} diff --git a/examples/with-global-stylesheet/README.md b/examples/with-global-stylesheet/README.md new file mode 100644 index 00000000..a2d543ee --- /dev/null +++ b/examples/with-global-stylesheet/README.md @@ -0,0 +1,44 @@ +# Global Stylesheet example + +This is an example of how you can include a global stylesheet in a next.js webapp. + + +## 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-global-stylesheet +cd with-global-stylesheet +``` + +To get this example running you just need to + + npm install . + npm run dev + +Visit [http://localhost:300](http://localhost:300) and try to modify `pages/style.scss` changing color. Your changes should be picked up instantly. + +Also see it working with plain css here +![example](example.gif) + +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) + +This project shows how you can set it up. Have a look at +- .babelrc +- next.config.js +- pages/style.scss +- pages/index.js + + +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 \ No newline at end of file diff --git a/examples/with-global-stylesheet/example.gif b/examples/with-global-stylesheet/example.gif new file mode 100644 index 00000000..93a38950 Binary files /dev/null and b/examples/with-global-stylesheet/example.gif differ diff --git a/examples/with-global-stylesheet/next.config.js b/examples/with-global-stylesheet/next.config.js new file mode 100644 index 00000000..25ce2340 --- /dev/null +++ b/examples/with-global-stylesheet/next.config.js @@ -0,0 +1,24 @@ +module.exports = { + webpack: (config, { dev }) => { + config.module.rules.push( + { + test: /\.(css|scss)/, + loader: 'emit-file-loader', + options: { + name: 'dist/[path][name].[ext]' + } + } + , + { + test: /\.css$/, + loader: 'babel-loader!raw-loader' + } + , + { + test: /\.scss$/, + loader: 'babel-loader!raw-loader!sass-loader' + } + ) + return config + } +} diff --git a/examples/with-global-stylesheet/package.json b/examples/with-global-stylesheet/package.json new file mode 100644 index 00000000..0367156e --- /dev/null +++ b/examples/with-global-stylesheet/package.json @@ -0,0 +1,22 @@ +{ + "name": "next.js-css-global-style-test", + "version": "1.0.0", + "description": "", + "scripts": { + "dev": "next dev", + "build": "next build", + "start": "next start" + }, + "author": "Davide Bertola ", + "license": "ISC", + "dependencies": { + "babel-plugin-wrap-in-js": "^1.1.0", + "next": "^2.0.0-beta.18", + "node-sass": "^4.4.0", + "raw-loader": "^0.5.1", + "sass-loader": "^4.1.1" + }, + "devDependencies": { + "now": "^3.1.0" + } +} diff --git a/examples/with-global-stylesheet/pages/index.js b/examples/with-global-stylesheet/pages/index.js new file mode 100644 index 00000000..1e4f8655 --- /dev/null +++ b/examples/with-global-stylesheet/pages/index.js @@ -0,0 +1,11 @@ +import React from 'react' + +import stylesheet from './style.scss' +// or, if you work with plain css +// import stylesheet from './style.css' + +export default () => +
+