With global stylesheet paths (#1327)

* with-global-stylesheet without relative paths and with node_modules

* a parenthetical remark about material-components-web not being part of the example

examples/with-global-stylesheet/.babelrc

@@ -1,5 +1,13 @@
 {
   "plugins": [
+    [
+      "module-resolver", {
+        "root": ["."],
+        "alias": {
+          "styles": "./styles"
+        },
+        "cwd": "babelrc"
+    }],
     [
       "wrap-in-js",
       {

examples/with-global-stylesheet/README.md

@@ -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) (if you'd like) 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

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$/,
+        test: /\.s(a|c)ss$/,
-        loader: 'babel-loader!raw-loader!sass-loader'
+        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

examples/with-global-stylesheet/package.json

@@ -10,7 +10,9 @@
   "author": "Davide Bertola <dade@dadeb.it>",
   "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",

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 () =>
   <div>