[Feature Request] How can i change path for sass override on webpack installation?

[selimdoyranli]

Problem to solve

I can override sass when created in a variables.scss /src/sass.

How can i change default /src/sass/variables.scss to /src/assets/style/scss/variables/_vuetify-override.scss

my vue.config.js

/* eslint-disable no-param-reassign */
const path = require('path');
const StyleLintPlugin = require('stylelint-webpack-plugin');
const CKEditorWebpackPlugin = require('@ckeditor/ckeditor5-dev-webpack-plugin');
const { styles } = require('@ckeditor/ckeditor5-dev-utils');

module.exports = {
  css: {
    extract: { ignoreOrder: true },
  },
  configureWebpack: config => {
    config.resolve.alias['@'] = path.resolve(__dirname, 'src/');
    config.resolve.alias.piri = path.resolve(__dirname, 'src/piri');

    config.plugins.push(new StyleLintPlugin({
      files: ['{assets/style,src}/**/*.{css,sass,scss,less,stylus,vue}'],
    }));

    const ckEditorWebpackPlugin = new CKEditorWebpackPlugin({
      language: 'tr',
    });

    config.plugins.push(ckEditorWebpackPlugin);
  },
  transpileDependencies: [/ckeditor5-[^/\\]+[/\\]src[/\\].+\.js$/, 'vuetify'],
  chainWebpack: config => {
    const oneOfsMap = config.module.rule('scss').oneOfs.store;
    oneOfsMap.forEach(item => {
      item
        .use('sass-resources-loader')
        .loader('sass-resources-loader')
        .options({
          // Global Styles (Do not import actual styles)
          resources: [
            // Plugins
            './src/assets/style/scss/plugins/_browserhack.scss', // Doc: https://github.com/selimdoyranli/browser-hack-sass-mixins
            './src/assets/style/scss/plugins/_breakpoint.scss',
            './src/assets/style/scss/plugins/_mq.scss', // Doc: https://github.com/sass-mq/sass-mq
            // Functions
            './src/assets/style/scss/functions/_center.scss',
            './src/assets/style/scss/functions/_triangle.scss',
            // Mixins
            './src/assets/style/scss/mixins/_font.scss',
            './src/assets/style/scss/mixins/_gradient.scss',
          ],
        });
    });

    config.module
      .rule('pug')
      .test(/\.pug$/)

    // this applies to <template lang="pug"> in Vue components
      .oneOf('vue-loader')
      .resourceQuery(/^\?vue/)
      .use('pug-plain')
      .loader('pug-plain-loader')
      .end()
      .end()

    // this applies to pug imports inside JavaScript, i.e. .pug files
      .oneOf('raw-pug-files')
      .use('pug-raw')
      .loader('raw-loader')
      .end()
      .use('pug-plain')
      .loader('pug-plain-loader')
      .end()
      .end();

    const svgRule = config.module.rule('svg');
    svgRule.exclude.add(path.join(__dirname, 'node_modules', '@ckeditor'));
    svgRule.exclude.add(
      path.join(__dirname, 'src', 'components', 'misc', 'form', 'html-editor', 'CKEditor', 'plugins'),
    );

    config.module
      .rule('cke-svg')
      .test(/ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/)
      .use('raw-loader')
      .loader('raw-loader');

    config.module
      .rule('cke-css')
      .test(/ckeditor5-[^/\\]+[/\\].+\.css$/)
      .use('postcss-loader')
      .loader('postcss-loader')
      .tap(() => styles.getPostCssConfig({
        themeImporter: {
          themePath: require.resolve('@ckeditor/ckeditor5-theme-lark'),
        },
        minify: true,
      }));

    config.module
      .rule('graphql')
      .test(/\.graphql$/)
      .use('graphql-tag/loader')
      .loader('graphql-tag/loader')
      .end();
  },
  pluginOptions: {
    apollo: {
      lintGQL: true,
    },
  },
};

Proposed solution

--

[KaelWD]

Duplicate of #187