VueJS - импортировать глобальный scss во все компоненты .vue

Question

Я использую Vue JS с ASP .NET Core, я начал проект с этого шаблона на GitHub (не из Vue CLI). Проект загружается нормально, но я готов использовать SCSS, чтобы я мог включить глобальный файл, содержащий переменные и миксины для всех компонентов vue.

Решение ' stone age ' заключается в том, чтобы включить файл в каждый шаблон компонента, но при этом повторяется одинаковое содержимое для всех компонентов.

Затем я обнаружил, что могу предварительно загрузить глобальный файл scss с помощью веб-пакета, поэтому я следовал нескольким документам ( здесь , здесь и здесь , чтобы назвать несколько ) но ничего не работает. Я все еще получаю «неопределенную переменную», когда пытаюсь использовать переменную внутри компонента, например:

<style lang="scss">
h1 {
    color: $danger;
}
</style>

Где $danger определено в _variables.scss, найдено в ./ClientApp/styles.

Я попытался настроить загрузчик SASS следующим образом (~styles - это псевдоним, определенный в конфигурации):

      use: [
        'vue-style-loader',
        'css-loader',
        {
          loader: 'sass-loader',
          options: {
            data: `
              @import "~styles/_variables.scss";
            `
          }
        }
      ]

Даже установив vue add style-resources-loader и настроив его в vue.config.js, вот так:

const path = require('path');

module.exports = {
  css: {
    loaderOptions: {
      // pass options to sass-loader
      sass: {
        data: `@import "~styles/global.scss";`
      }
    }
  }
}

Я начинаю думать, что это связано с тем, как ASP.NET Core обрабатывает приложения SPA, или с какой-то неверной конфигурацией Webpack, но я понятия не имею, что делать дальше.

Answer 1

Учитывая, что вы пытались настроить его с помощью первого бита кода, я предполагаю, что вы используете vue-cli 2, а не 3.

Если это так, то вам нужно изменить конфигурацию загрузчика vue, а не загрузчика sass.

В ./build/utils.js необходимо добавить параметры для функции generateLoaders() следующим образом:

return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less', {
      enableJavascript: true
    }),
    sass: generateLoaders('sass', {
      indentedSyntax: true
    }),
    scss: generateLoaders('sass', {
      data: `@import "${path.resolve(__dirname, "../src/your_file.scss")}";` // THIS LINE
    }),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
}

Вы сможете использовать переменные SASS в любом компоненте, не импортируя его.