Skip to content

Instantly share code, notes, and snippets.

@stoikerty
Last active June 27, 2017 09:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save stoikerty/64e3b9eee334311270ee81be17746206 to your computer and use it in GitHub Desktop.
Save stoikerty/64e3b9eee334311270ee81be17746206 to your computer and use it in GitHub Desktop.
Example of how dev-toolit v5 handles server-rendering of .sass files
// cssHook.js - adapted from dev-toolkit@5.5.4
import path from 'path';
import cssHook from 'css-modules-require-hook';
import sass from 'node-sass';
const rootForProject = './';
const scssIncludePaths = path.resolve(rootForProject, 'src/client');
const cssChunkNaming = '[name]__[local]___[hash:base64:5]';
// Set up server-side rendering of scss files
// ---
// Implement a hook in node for `.scss`-imports that uses
// the same settings as the webpack config.
const preprocessCss = (cssFileData, cssFilePath) => {
// Include any paths that are part of the config,
// as well as the current path where css-file resides.
const includePaths = [].concat(scssIncludePaths);
includePaths.push(path.dirname(cssFilePath));
return sass.renderSync({
data: cssFileData,
includePaths,
}).css;
};
export default () => {
// Allow vanilla css-modules
cssHook({
extensions: ['.css'],
// Share naming-convention of `css-loader`
generateScopedName: cssChunkNaming,
});
// Separate processing for scss
cssHook({
extensions: ['.scss'],
// Share naming-convention of `css-loader`
generateScopedName: cssChunkNaming,
// Process files with same settings as `sass-loader` and return css.
preprocessCss,
});
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment