From 822a8390d465539af9d8257e7eef61bbb3388987 Mon Sep 17 00:00:00 2001 From: Daniel Farrell Date: Thu, 27 Apr 2017 22:04:32 -0400 Subject: [PATCH] Add the sass plugin to this repo --- docs/docs/plugins.md | 1 + packages/gatsby-plugin-sass/.gitignore | 3 + packages/gatsby-plugin-sass/.npmignore | 34 ++++++++++ packages/gatsby-plugin-sass/README.md | 23 +++++++ packages/gatsby-plugin-sass/package.json | 27 ++++++++ .../gatsby-plugin-sass/src/gatsby-node.js | 66 +++++++++++++++++++ 6 files changed, 154 insertions(+) create mode 100644 packages/gatsby-plugin-sass/.gitignore create mode 100644 packages/gatsby-plugin-sass/.npmignore create mode 100644 packages/gatsby-plugin-sass/README.md create mode 100644 packages/gatsby-plugin-sass/package.json create mode 100644 packages/gatsby-plugin-sass/src/gatsby-node.js diff --git a/docs/docs/plugins.md b/docs/docs/plugins.md index 500dd954111db..46824aebe5655 100644 --- a/docs/docs/plugins.md +++ b/docs/docs/plugins.md @@ -29,6 +29,7 @@ mean converting this file into a JS component). * [gatsby-plugin-manifest](/docs/packages/gatsby-plugin-manifest/) * [gatsby-plugin-offline](/docs/packages/gatsby-plugin-offline/) * [gatsby-plugin-preact](/docs/packages/gatsby-plugin-preact/) +* [gatsby-plugin-sass](/docs/packages/gatsby-plugin-sass/) * [gatsby-plugin-sharp](/docs/packages/gatsby-plugin-sharp/) * [gatsby-plugin-typescript](/docs/packages/gatsby-plugin-typescript/) * [gatsby-source-filesystem](/docs/packages/gatsby-source-filesystem/) diff --git a/packages/gatsby-plugin-sass/.gitignore b/packages/gatsby-plugin-sass/.gitignore new file mode 100644 index 0000000000000..8f4bd83260b71 --- /dev/null +++ b/packages/gatsby-plugin-sass/.gitignore @@ -0,0 +1,3 @@ +node_modules +/gatsby-node.js +/index.js \ No newline at end of file diff --git a/packages/gatsby-plugin-sass/.npmignore b/packages/gatsby-plugin-sass/.npmignore new file mode 100644 index 0000000000000..e771d2c9fa299 --- /dev/null +++ b/packages/gatsby-plugin-sass/.npmignore @@ -0,0 +1,34 @@ +# Logs +logs +*.log + +# Runtime data +pids +*.pid +*.seed + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage + +# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (http://nodejs.org/api/addons.html) +build/Release + +# Dependency directory +# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git +node_modules +*.un~ +yarn.lock +src +flow-typed +coverage +decls +examples diff --git a/packages/gatsby-plugin-sass/README.md b/packages/gatsby-plugin-sass/README.md new file mode 100644 index 0000000000000..987389134cc17 --- /dev/null +++ b/packages/gatsby-plugin-sass/README.md @@ -0,0 +1,23 @@ +# gatsby-plugin-sass +Provides drop-in support for SASS/SCSS stylesheets + +## Install +`yarn add gatsby-plugin-sass` + +## How to use +1. Include the plugin in your `gatsby-config.js` file. +2. Write your stylesheets in SASS/SCSS and import them + +```javascript +// in gatsby-config.js +plugins: [ + // no configuration + `gatsby-plugin-sass`, + // custom configuration + { + resolve: `gatsby-plugin-sass`, + // options are passed directly to the compiler + options: {} + } +] +``` diff --git a/packages/gatsby-plugin-sass/package.json b/packages/gatsby-plugin-sass/package.json new file mode 100644 index 0000000000000..f7e54acc84eb0 --- /dev/null +++ b/packages/gatsby-plugin-sass/package.json @@ -0,0 +1,27 @@ +{ + "name": "gatsby-plugin-sass", + "description": "Gatsby plugin to handle scss/sass files", + "version": "1.0.0-alpha13", + "author": "Daniel Farrell ", + "dependencies": { + "extract-text-webpack-plugin": "^1.0.1", + "node-sass": "^4.5.2", + "sass-loader": "^4.1.1", + "webpack": "^1.13.3" + }, + "devDependencies": { + "babel-cli": "^6.24.1" + }, + "keywords": [ + "gatsby", + "sass", + "scss" + ], + "license": "MIT", + "main": "index.js", + "readme": "README.md", + "scripts": { + "build": "babel src --out-dir .", + "watch": "babel -w src --out-dir ." + }, +} diff --git a/packages/gatsby-plugin-sass/src/gatsby-node.js b/packages/gatsby-plugin-sass/src/gatsby-node.js new file mode 100644 index 0000000000000..32aa95dfbefe9 --- /dev/null +++ b/packages/gatsby-plugin-sass/src/gatsby-node.js @@ -0,0 +1,66 @@ +import ExtractTextPlugin from "extract-text-webpack-plugin"; + +exports.modifyWebpackConfig = ({ args }) => { + const { config, stage } = args; + + const cssModulesConf = `css?modules&minimize&importLoaders=1`; + const cssModulesConfDev = `${cssModulesConf}&sourceMap&localIdentName=[name]---[local]---[hash:base64:5]`; + + switch (stage) { + case `develop`: { + config.loader(`sass`, { + test: /\.s(a|c)ss$/, + exclude: /\.module\.s(a|c)ss$/, + loaders: [`style`, `css`, `sass`] + }); + + config.loader(`sassModules`, { + test: /\.module\.s(a|c)ss$/, + loaders: [`style`, cssModulesConfDev, `sass`] + }); + return config; + } + case `build-css`: { + config.loader("sass", { + test: /\.s(a|c)ss$/, + exclude: /\.module\.s(a|c)ss$/, + loader: ExtractTextPlugin.extract([`css?minimize`, `sass`]) + }); + + config.loader(`sassModules`, { + test: /\.module\.s(a|c)ss$/, + loader: ExtractTextPlugin.extract(`style`, [cssModulesConf, `sass`]) + }); + return config; + } + case `build-html`: { + config.loader("sass", { + test: /\.s(a|c)ss$/, + exclude: /\.module\.s(a|c)ss$/, + loader: `null` + }); + + config.loader(`sassModules`, { + test: /\.module\.s(a|c)ss$/, + loader: ExtractTextPlugin.extract(`style`, [cssModulesConf, `sass`]) + }); + return config; + } + case `build-javascript`: { + config.loader("sass", { + test: /\.s(a|c)ss$/, + exclude: /\.module\.s(a|c)ss$/, + loader: ExtractTextPlugin.extract([`css`, `sass`]) + }); + + config.loader(`sassModules`, { + test: /\.module\.s(a|c)ss$/, + loader: ExtractTextPlugin.extract(`style`, [cssModulesConf, `sass`]) + }); + return config; + } + default: { + return config; + } + } +};