diff --git a/README.md b/README.md index 3a47193..7112711 100644 --- a/README.md +++ b/README.md @@ -23,14 +23,14 @@ Follow the steps below to install and initialize rSR in a new project. ```bash npx rsr ``` -1. Check the `Suggested Setup Configs` section below for additional setup steps not related to rSR. +1. See the `Additional Setup Configs` section below for additional setup steps not related to rSR. 1. Begin development. ```bash npm start ``` -## Suggested Setup Configs -As of version `1.0.0` of rSR, different types of configurations has been offloaded from the tool internally and it is suggested to be maintained by each project manually. This allows for greater flexibility in the management of these configurations and it is a better practice for the tool to not dictate this. +## Additional Setup Configs +As of version `1.0.0` of rSR, different types of configurations have been offloaded from the tool internally and it is required to be maintained by each project manually. This allows for greater flexibility in the management of these configurations and it is a better practice for the tool to not dictate this. * [Browserslist](https://github.com/spothero/browserslist-config) * [Prettier](https://github.com/spothero/prettier-config) @@ -38,6 +38,7 @@ As of version `1.0.0` of rSR, different types of configurations has been offload * [ESLint](https://github.com/spothero/eslint-config) * [Stylelint](https://github.com/spothero/stylelint-config) +Your project will not function correctly until these are implemented, be it using the above configurations or similar ones that fulfill the requirements for each type of configuration. ## Available Configuration You can override a handful of configuration options by creating a `rsr.config.js` file at the root of your project. Most options are direct pass throughs of their webpack counterparts as shown below. The module should export a function that returns an object. The following parameters are passed into the function: @@ -100,6 +101,16 @@ The style of [source map](https://webpack.js.org/configuration/devtool/#devtool) **default:** `isDev ? 'cheap-module-source-map' : 'source-map'` +### useResources +Imports [Sass resources](https://github.com/shakacode/sass-resources-loader) into every Sass module to avoid manual imports in every file where shared variables/mixins/placeholders are used. + +**default:** `true` + +### resourcesPath +The path or array of paths to the resources file(s) when `useResources` is `true`. + +**default:** `'src/common/resources.scss'` + ## Custom Production Asset Path In some cases () you may want to pass a specific path for your static assets to replace the pre-configured `publicPath`. You can do so by setting a special `ASSET_PATH` environment variable before running the build script in your build configuration. diff --git a/config/webpack.config.js b/config/webpack.config.js index 3dce3b1..093dd9c 100644 --- a/config/webpack.config.js +++ b/config/webpack.config.js @@ -132,12 +132,6 @@ module.exports = (mode = 'development') => { implementation: dartSass, }, }, - { - loader: 'sass-resources-loader', - options: { - resources: 'src/common/resources.scss', - }, - }, ], }, { diff --git a/scripts/utils/get-user-config.js b/scripts/utils/get-user-config.js index 8aefbe3..37bb0c6 100644 --- a/scripts/utils/get-user-config.js +++ b/scripts/utils/get-user-config.js @@ -1,3 +1,4 @@ +/* eslint-disable no-console */ const chalk = require('chalk'); const {cosmiconfig} = require('cosmiconfig'); @@ -13,7 +14,7 @@ function getUserConfig() { .then(result => { if (!result) { console.log( - chalk.green( + chalk.yellow( 'No rsr.config.js present, proceeding with default configuration.' ) ); diff --git a/scripts/utils/get-webpack-config.js b/scripts/utils/get-webpack-config.js index a567195..ecb588d 100644 --- a/scripts/utils/get-webpack-config.js +++ b/scripts/utils/get-webpack-config.js @@ -1,5 +1,13 @@ const webpackConfig = require('../../config/webpack.config'); +const RESOURCES_PATH = 'src/common/resources.scss'; +const SASS_RESOURCES_LOADER = { + loader: 'sass-resources-loader', + options: { + resources: RESOURCES_PATH, + }, +}; + function getWebpackConfig({webpack, mode, userConfig}) { const defaultConfig = webpackConfig(mode); let {devServer, ...config} = defaultConfig; @@ -15,6 +23,8 @@ function getWebpackConfig({webpack, mode, userConfig}) { plugins, rules, sourceMap, + useResources = true, + resourcesPath = RESOURCES_PATH, } = userConfig({ webpack, mode, @@ -59,9 +69,20 @@ function getWebpackConfig({webpack, mode, userConfig}) { } } + if (useResources) { + config.module.rules[1].use.push({ + loader: 'sass-resources-loader', + options: { + resources: resourcesPath, + }, + }); + } + if (cssModulesIdentName) { config.module.rules[1].use[1].options.modules.localIdentName = cssModulesIdentName; } + } else { + config.module.rules[1].use.push(SASS_RESOURCES_LOADER); } return { diff --git a/scripts/utils/pkg-scripts.js b/scripts/utils/pkg-scripts.js index d41285f..a2645b3 100644 --- a/scripts/utils/pkg-scripts.js +++ b/scripts/utils/pkg-scripts.js @@ -1,3 +1,4 @@ +/* eslint-disable no-console */ const fs = require('fs'); const chalk = require('chalk');