Skip to content

Commit

Permalink
Add the sass plugin to this repo
Browse files Browse the repository at this point in the history
  • Loading branch information
Daniel Farrell committed Apr 28, 2017
1 parent b7840a7 commit 822a839
Show file tree
Hide file tree
Showing 6 changed files with 154 additions and 0 deletions.
1 change: 1 addition & 0 deletions docs/docs/plugins.md
Original file line number Diff line number Diff line change
Expand Up @@ -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/)
Expand Down
3 changes: 3 additions & 0 deletions packages/gatsby-plugin-sass/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
node_modules
/gatsby-node.js
/index.js
34 changes: 34 additions & 0 deletions packages/gatsby-plugin-sass/.npmignore
Original file line number Diff line number Diff line change
@@ -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
23 changes: 23 additions & 0 deletions packages/gatsby-plugin-sass/README.md
Original file line number Diff line number Diff line change
@@ -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: {}
}
]
```
27 changes: 27 additions & 0 deletions packages/gatsby-plugin-sass/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
{
"name": "gatsby-plugin-sass",
"description": "Gatsby plugin to handle scss/sass files",
"version": "1.0.0-alpha13",
"author": "Daniel Farrell <[email protected]>",
"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 ."
},
}
66 changes: 66 additions & 0 deletions packages/gatsby-plugin-sass/src/gatsby-node.js
Original file line number Diff line number Diff line change
@@ -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;
}
}
};

0 comments on commit 822a839

Please sign in to comment.