Skip to content

Instantly share code, notes, and snippets.

@ostowe
Last active Feb 11, 2021
Embed
What would you like to do?
Sass webpack implementation
const { MiniCSSExtractPlugin } = require('mini-css-extract-plugin');
const jsonImporter = require('node-sass-json-importer');
const sassCoreResources = require('./sassCoreResources');
module.exports = (env, argv) => {
const { mode } = argv;
const isProd = 'production' === mode;
return {
plugins: [
// ... other plugins go here.
new MiniCSSExtractPlugin({
filename: '[name].[hash].css',
chunkFilename: '[id].[hash].css',
}),
],
module: {
rules: [
// ... other loader rules go here.
{
test: /\.s[ac]ss$/,
use: [
MiniCSSExtractPlugin.loader,
{
loader: 'css-loader',
options: {
url: true,
importLoaders: 1,
// Allows usage of CSS modules in your react components.
modules: {
mode: 'local',
localIdentName: '[name]__[local]--[hash:base64:5]',
},
sourceMap: ! isProd,
localsConvention: 'camelCase',
},
},
{
loader: 'sass-loader',
options: {
sourceMap: ! isProd,
sassOptions: {
// Allows you to import JSON files (like variables) into your sass.
// See https://github.com/pmowrer/node-sass-json-importer
importer: jsonImporter(),
},
},
},
/**
* Allows you to supply utilities, variables, etc. used in all your
* other sass files automatically via webpack.
*
* See https://github.com/shakacode/sass-resources-loader
*/
{
loader: 'sass-resources-loader',
options: {
resources: sassCoreResources,
},
},
],
},
],
},
};
};
/**
* Example usage of CSS modules stylesheets your components.
* See https://webpack.js.org/loaders/css-loader/#modules
*
* `styles` is an object containing a mapping of classnames defined in your
* stylsheet to a localized (hashed) version of that class for use in your component.
*
* Example: { wrapper: 'myComponentStyles__wrapper__1h2837' }
*
* This ensures that classnames for this component will never clash with those
* of other components (eg. you can use `wrapper` as a classname in every component's stylesheet).
*/
import React from 'react';
import styles from './myComponentStyles.scss';
const MyComponent = () => (
<div className={styles.wrapper}>
This is a test!
</div>
);
export default MyComponent;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment