From 3e2d08fe0d2940e308289713c72e04f69a2f27e8 Mon Sep 17 00:00:00 2001 From: Orlin M Bozhinov Date: Thu, 2 Mar 2017 12:57:34 +0200 Subject: [PATCH 1/2] with-global-stylesheet without relative paths and with node_modules --- examples/with-global-stylesheet/.babelrc | 8 ++++++++ examples/with-global-stylesheet/README.md | 17 ++++++++++------- examples/with-global-stylesheet/next.config.js | 18 +++++++++++++++--- examples/with-global-stylesheet/package.json | 2 ++ examples/with-global-stylesheet/pages/index.js | 4 ++-- .../{pages/style.css => styles/index.css} | 0 .../{pages/style.scss => styles/index.scss} | 0 7 files changed, 37 insertions(+), 12 deletions(-) rename examples/with-global-stylesheet/{pages/style.css => styles/index.css} (100%) rename examples/with-global-stylesheet/{pages/style.scss => styles/index.scss} (100%) diff --git a/examples/with-global-stylesheet/.babelrc b/examples/with-global-stylesheet/.babelrc index 4df8f5d5a807..fe96d14aea65 100644 --- a/examples/with-global-stylesheet/.babelrc +++ b/examples/with-global-stylesheet/.babelrc @@ -1,5 +1,13 @@ { "plugins": [ + [ + "module-resolver", { + "root": ["."], + "alias": { + "styles": "./styles" + }, + "cwd": "babelrc" + }], [ "wrap-in-js", { diff --git a/examples/with-global-stylesheet/README.md b/examples/with-global-stylesheet/README.md index a2d543ee5a39..538167179fcb 100644 --- a/examples/with-global-stylesheet/README.md +++ b/examples/with-global-stylesheet/README.md @@ -9,7 +9,7 @@ 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 +cd with-global-stylesheet ``` To get this example running you just need to @@ -17,7 +17,7 @@ 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. +Visit [http://localhost:300](http://localhost:300) and try to modify `styles/index.scss` changing color. Your changes should be picked up instantly. Also see it working with plain css here ![example](example.gif) @@ -31,14 +31,17 @@ 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) +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 +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) even easier to work with. + +This project shows how you can set it up. Have a look at: - .babelrc - next.config.js -- pages/style.scss - pages/index.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 \ No newline at end of file +github repository https://github.com/davibe/next.js-css-global-style-test diff --git a/examples/with-global-stylesheet/next.config.js b/examples/with-global-stylesheet/next.config.js index 25ce23404e44..ce788fab1b0f 100644 --- a/examples/with-global-stylesheet/next.config.js +++ b/examples/with-global-stylesheet/next.config.js @@ -1,3 +1,6 @@ +const path = require('path') +const glob = require('glob') + module.exports = { webpack: (config, { dev }) => { config.module.rules.push( @@ -11,12 +14,21 @@ module.exports = { , { test: /\.css$/, - loader: 'babel-loader!raw-loader' + use: ['babel-loader', 'raw-loader'] } , { - test: /\.scss$/, - loader: 'babel-loader!raw-loader!sass-loader' + test: /\.s(a|c)ss$/, + use: ['babel-loader', 'raw-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 diff --git a/examples/with-global-stylesheet/package.json b/examples/with-global-stylesheet/package.json index f4327b45b3ab..00a1677096c2 100644 --- a/examples/with-global-stylesheet/package.json +++ b/examples/with-global-stylesheet/package.json @@ -10,7 +10,9 @@ "author": "Davide Bertola ", "license": "ISC", "dependencies": { + "babel-plugin-module-resolver": "2.5.0", "babel-plugin-wrap-in-js": "^1.1.0", + "glob": "7.1.1", "next": "^2.0.0-beta.18", "node-sass": "^4.4.0", "raw-loader": "^0.5.1", diff --git a/examples/with-global-stylesheet/pages/index.js b/examples/with-global-stylesheet/pages/index.js index 1e4f86552ede..7161c546ca43 100644 --- a/examples/with-global-stylesheet/pages/index.js +++ b/examples/with-global-stylesheet/pages/index.js @@ -1,8 +1,8 @@ import React from 'react' -import stylesheet from './style.scss' +import stylesheet from 'styles/index.scss' // or, if you work with plain css -// import stylesheet from './style.css' +// import stylesheet from 'styles/index.css' export default () =>
diff --git a/examples/with-global-stylesheet/pages/style.css b/examples/with-global-stylesheet/styles/index.css similarity index 100% rename from examples/with-global-stylesheet/pages/style.css rename to examples/with-global-stylesheet/styles/index.css diff --git a/examples/with-global-stylesheet/pages/style.scss b/examples/with-global-stylesheet/styles/index.scss similarity index 100% rename from examples/with-global-stylesheet/pages/style.scss rename to examples/with-global-stylesheet/styles/index.scss From 70da1a7d8267894c86a45d22206af2fb93273b08 Mon Sep 17 00:00:00 2001 From: Orlin M Bozhinov Date: Thu, 2 Mar 2017 13:08:15 +0200 Subject: [PATCH 2/2] a parenthetical remark about material-components-web not being part of the example --- examples/with-global-stylesheet/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/with-global-stylesheet/README.md b/examples/with-global-stylesheet/README.md index 538167179fcb..c337a0ae3c4d 100644 --- a/examples/with-global-stylesheet/README.md +++ b/examples/with-global-stylesheet/README.md @@ -35,7 +35,7 @@ The strategy here is to transpile the stylesheet file to a css-in-js file so tha 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) even easier to work with. +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. This project shows how you can set it up. Have a look at: - .babelrc