feat: Add useResources and resourcesPath options for better control o…

…f sass-resources-loader (#7)

README.md

@@ -23,21 +23,22 @@ 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)
 * [Babel](https://github.com/spothero/babel-preset)
 * [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.
 

config/webpack.config.js

@@ -132,12 +132,6 @@ module.exports = (mode = 'development') => {
                                 implementation: dartSass,
                             },
                         },
-                        {
-                            loader: 'sass-resources-loader',
-                            options: {
-                                resources: 'src/common/resources.scss',
-                            },
-                        },
                     ],
                 },
                 {

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.'
                     )
                 );

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 {

scripts/utils/pkg-scripts.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 const fs = require('fs');
 const chalk = require('chalk');