With global stylesheet paths (vercel#1327)

orlin · rauchg · commit 38cc82d0bc13 · 2017-03-02T08:37:58.000-08:00
* with-global-stylesheet without relative paths and with node_modules

* a parenthetical remark about material-components-web not being part of the example
diff --git 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
@@ -9,15 +9,15 @@ 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
 
     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
+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
@@ -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
@@ -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",
diff --git 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 () =>
   <div>
diff --git a/examples/with-global-stylesheet/styles/index.css b/examples/with-global-stylesheet/styles/index.css
diff --git a/examples/with-global-stylesheet/styles/index.scss b/examples/with-global-stylesheet/styles/index.scss

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,13 @@`
`1`	`1`	`{`
`2`	`2`	`"plugins": [`
	`3`	`+ [`
	`4`	`+ "module-resolver", {`
	`5`	`+ "root": ["."],`
	`6`	`+ "alias": {`
	`7`	`+ "styles": "./styles"`
	`8`	`+ },`
	`9`	`+ "cwd": "babelrc"`
	`10`	`+ }],`
`3`	`11`	`[`
`4`	`12`	`"wrap-in-js",`
`5`	`13`	`{`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,6 @@`
	`1`	`+const path = require('path')`
	`2`	`+const glob = require('glob')`
	`3`	`+`
`1`	`4`	`module.exports = {`
`2`	`5`	`webpack: (config, { dev }) => {`
`3`	`6`	`config.module.rules.push(`
`@@ -11,12 +14,21 @@ module.exports = {`
`11`	`14`	`,`
`12`	`15`	`{`
`13`	`16`	`test: /\.css$/,`
`14`		`- loader: 'babel-loader!raw-loader'`
	`17`	`+ use: ['babel-loader', 'raw-loader']`
`15`	`18`	`}`
`16`	`19`	`,`
`17`	`20`	`{`
`18`		`- test: /\.scss$/,`
`19`		`- loader: 'babel-loader!raw-loader!sass-loader'`
	`21`	`+ test: /\.s(a\|c)ss$/,`
	`22`	`+ use: ['babel-loader', 'raw-loader',`
	`23`	`+ { loader: 'sass-loader',`
	`24`	`+ options: {`
	`25`	`+ includePaths: ['styles', 'node_modules']`
	`26`	`+ .map((d) => path.join(__dirname, d))`
	`27`	`+ .map((g) => glob.sync(g))`
	`28`	`+ .reduce((a, c) => a.concat(c), [])`
	`29`	`+ }`
	`30`	`+ }`
	`31`	`+ ]`
`20`	`32`	`}`
`21`	`33`	`)`
`22`	`34`	`return config`