How to use sass-loader - 6 common examples

function mergeRules (api, opt, ext) {
  const data = []
  const end = ext === 'sass' ? "'" : "';"

  addImports(api, 'variables', data, end)

  // If user isn't supplying variables, avoid prepending data
  if (!data.length) return opt

  // Inject Vuetify styles at the end of user supplied
  data.push(`@import '~vuetify/src/styles/styles.sass${end}`)

  let sassLoaderVersion
  try {
    sassLoaderVersion = semver.major(require('sass-loader/package.json').version)
  } catch (e) {}

  // Merge with user-defined loader data config
  if (sassLoaderVersion < 8) {
    if (opt.data) data.unshift(opt.data)

    opt.data = data.join('\n')
  } else {
    if (opt.prependData) data.unshift(opt.prependData)

    opt.prependData = data.join('\n')
  }

  return opt
}

function setSassVariables (opt, file) {
  const variables = genSassVariableImport(file)

  let sassLoaderVersion
  try {
    sassLoaderVersion = semver.major(require('sass-loader/package.json').version)
  } catch (e) {}

  // Merge with user-defined loader data config
  if (sassLoaderVersion < 8) opt.data = variables
  else opt.prependData = variables

  return opt
}

api.chainWebpack(webpackConfig => {
    const getAssetPath = require('../util/getAssetPath')
    const shadowMode = !!process.env.VUE_CLI_CSS_SHADOW_MODE
    const isProd = process.env.NODE_ENV === 'production'

    let sassLoaderVersion
    try {
      sassLoaderVersion = semver.major(require('sass-loader/package.json').version)
    } catch (e) {}
    if (sassLoaderVersion < 8) {
      pauseSpinner()
      warn('A new version of sass-loader is available. Please upgrade for best experience.')
      resumeSpinner()
    }

    const defaultSassLoaderOptions = {}
    try {
      defaultSassLoaderOptions.implementation = require('sass')
      // since sass-loader 8, fibers will be automatically detected and used
      if (sassLoaderVersion < 8) {
        defaultSassLoaderOptions.fiber = require('fibers')
      }
    } catch (e) {}

.then((newOptions) => {
      delete newOptions.scssThemePath; // eslint-disable-line no-param-reassign
      newLoaderContext.query = newOptions;

      const scssThemePath = getScssThemePath(options);
      newLoaderContext.addDependency(scssThemePath);

      return sassLoader.call(newLoaderContext, ...args);
    })
    .catch((error) => {

const semver = require('semver')

let sassLoaderVersion
try {
  sassLoaderVersion = semver.major(require('sass-loader/package.json').version)
} catch (e) {}

const SCSS =
  `
$uni-color-primary: #007aff;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;

$uni-text-color: #333;//基本色
$uni-text-color-inverse: #fff;//反色
$uni-text-color-grey: #999;//辅助灰色，如加载更多的提示信息
$uni-text-color-placeholder: #808080;
$uni-text-color-disable: #c0c0c0;

$uni-bg-color: #ffffff;

export const themeImporter = (themeScssPath, contents) => (url, previousResolve, done) => {
  const request = urlToRequest(url);
  const pathsToTry = importsToResolve(request);

  const baseDirectory = path.dirname(previousResolve);
  for (let i = 0; i < pathsToTry.length; i += 1) {
    const potentialResolve = pathsToTry[i];
    if (path.resolve(baseDirectory, potentialResolve) === themeScssPath) {
      done({ contents });
      return;
    }
  }
  done();
};