Sass Loader Options

sass-options.js

const path = require('path')
const implementation = require('sass')

/**
 * @file Webpack Sass Loader Options
 * @see {@link https://webpack.js.org/loaders/sass-loader/}
 */

module.exports = {
  /**
   * Determines which Sass data to prepend.
   *
   * @see {@link https://webpack.js.org/api/loaders/#the-loader-context}
   *
   * @param content - File content
   * @param ctx - Sass loader context
   * @returns {string} String to prepend
   */
  additionalData: (content, ctx) => {
    const { resourcePath, rootContext } = ctx
    const currPath = path.relative(rootContext, resourcePath)

    let prepend = ''

    if (currPath.includes('components.scss')) {
      prepend = "@import '../../config/config';\n@import '../../utils/utils';"
    }

    return prepend + content
  },
  implementation,
  sassOptions: {
    includePaths: ['src/theme/'],
    indentedSyntax: false,
    outputStyle: 'expanded'
  }
}