https://github.com/seek-oss/seek-style-guide-webpack
Webpack decorators for integrating with the SEEK Style Guide.
https://github.com/seek-oss/seek-style-guide-webpack
babel css-modules front-end less react style-guide webpack
Last synced: 5 months ago
JSON representation
Webpack decorators for integrating with the SEEK Style Guide.
- Host: GitHub
- URL: https://github.com/seek-oss/seek-style-guide-webpack
- Owner: seek-oss
- License: mit
- Archived: true
- Created: 2017-03-02T10:55:28.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2023-04-07T09:27:37.000Z (about 3 years ago)
- Last Synced: 2025-12-22T04:49:47.452Z (6 months ago)
- Topics: babel, css-modules, front-end, less, react, style-guide, webpack
- Language: JavaScript
- Homepage:
- Size: 47.9 KB
- Stars: 11
- Watchers: 12
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
[](http://travis-ci.org/seek-oss/seek-style-guide-webpack) [](https://www.npmjs.com/package/seek-style-guide-webpack) [](https://github.com/semantic-release/semantic-release) [](http://commitizen.github.io/cz-cli/) [](https://github.com/prettier/prettier)
# seek-style-guide-webpack
[Webpack](https://webpack.js.org/) decorators for integrating with the [SEEK Style Guide](https://github.com/seek-oss/seek-style-guide).
## Installation
```bash
$ npm install --save-dev seek-style-guide-webpack
```
## Setup
First, decorate your server Webpack config:
```js
const { decorateServerConfig } = require('seek-style-guide-webpack');
module.exports = decorateServerConfig({
// Webpack config...
});
```
Then, decorate your client Webpack config:
```js
const { decorateClientConfig } = require('seek-style-guide-webpack');
module.exports = decorateClientConfig({
// Webpack config...
});
```
## Options
### CSS Output Loader `{ cssOutputLoader: | 'style-loader' }`
By default the client decorator will use [`style-loader`](https://github.com/webpack-contrib/style-loader) to handle the styles emitted from the [`seek-style-guide`](https://github.com/seek-oss/seek-style-guide). Alternatively, you can
pass in your own loader configuration, eg.
```js
const { decorateClientConfig } = require('seek-style-guide-webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const config = {
// Webpack config...
plugins: [
new MiniCssExtractPlugin(
filename: 'style.css'
})
]
};
module.exports = decorateClientConfig(config, {
cssOutputLoader: MiniCssExtractPlugin.loader
});
```
Please note that, if your Webpack loaders aren't scoped to your local project files via the ["include" option](https://webpack.github.io/docs/configuration.html#module-loaders), the decorator will throw an error.
### Extra includes (optional) `{ extraIncludePaths: Array }`
If you have other external node_modules that need to be compiled in the same way as the seek-style-guide then you can pass an extra parameter to the decorators.
```js
module.exports = decorateClientConfig(config, {
// List of node_modules that need to be compiled by webpack
extraIncludePaths: ['my-other-module']
});
```
### CSS Selector Prefix (optional) `{ cssSelectorPrefix: string }`
This selector prefix is automatically prepended to all selectors to ensure styles don't leak out into the global scope.
For example, this is used for generating the standalone header & footer in the style guide.
```js
module.exports = decorateClientConfig(config, {
cssSelectorPrefix: '.__SSG__'
});
```
## Contributing
Refer to [CONTRIBUTING.md](./CONTRIBUTING.md).
## License
MIT.