Вью.js: всегда загружайте настройки.файл scss в каждом разделе стиля vue

я некоторое время боролся с одним и тем же вопросом. Но есть очень простое решение. Эта функция поставляется через сам node-sass.

таким образом, вы можете объявить свои глобалы scss в файле, скажем globals.scss путь к которому:

/src/scss/globals.scss

теперь вы можете просто отредактировать vue-loader config:

loaders: {
  sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1&data=@import "./src/scss/globals"',
  scss: 'vue-style-loader!css-loader!sass-loader?data=@import "./src/scss/globals";'
}

и вуаля! Глобалы scss доступны для всех компонентов vue. Надеюсь на это. помогает!

обновление:

многие настройки были обновлены в новых выпусках vue. Таким образом, вышеуказанные изменения могут не казаться trvial в последних проектах vue. Поэтому я кратко расскажу, как все это связано ... --22-->

короткая версия:

найти build/utils.js, который будет содержать метод (скорее всего по имени cssLoaders() ). Этот метод вернет такой объект:

return {
   ...
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
   ...
  }

вам просто нужно изменить scss/sass конкретная строка для чего-то вроде этого:

 return {
   ...
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders(['css', 'sass?data=@import "~assets/styles/app";']),
   ...
  }

Версия:

webpack.base.conf.js содержит vue-loader в нем это выглядело бы примерно так:

    ...    
    {
            test: /\.vue$/,
            loader: 'vue-loader',
            options: vueLoaderConfig
        },
    ...

на vueLoaderConfig переменная импортируется из vue-loader.conf.js файл, который равен этому объекту:

    {
      loaders: utils.cssLoaders( Obj ),  // actual settings coming from cssLoader method of build/utils.js
      transformToRequire: {
       //some key value pairs would be here
      }
    }

на build/utils.js файл мы находим cssLoaders() метод, который возвращает: ....

     return {
        css: generateLoaders(),
        postcss: generateLoaders(),
        less: generateLoaders('less'),
        sass: generateLoaders('sass', { indentedSyntax: true }),
        scss: generateLoaders('sass'),
        stylus: generateLoaders('stylus'),
        styl: generateLoaders('stylus')
      }

вам просто нужно обновить приведенный выше код с помощью обновлено scss конфигурация такая:

       ...
        {
           ...
            scss: generateLoaders(['css', 'sass?data=@import"~assets/scss/main";']),
           ...
         }
        ...

таким образом, переменные/миксины написано src/assets/scss/main.scss файл будет доступен во всех ваших компонентах.

Я думаю, вы используете webpack? Вы можете потребовать settings.scss файл в вашем приложении.файл JS что-то вроде этого

require("!style!css!sass!./file.scss");

следовательно, когда он составлен. Все ваши компоненты получат его. Вам не придется требовать этого от каждого из них.

Если вы используете шаблон Vue webpack, вы можете исправить его с помощью одной строки кода в build/utils.js: scss: generateLoaders(['css', 'sass?data=@import "~assets/styles/app";'])

затем в src/assets/styles/app, вы добавляете все @imports и вуаля!

Я не верю, что вы можете глобально импортировать файл. Я, вероятно, не сделал бы этого в любом случае, это недостаточно ясно. Если кто-то хочет переместить этот компонент в другой проект, у них будет нет идея полагается на этот файл.

вы можете, однако, сделать управление пути намного проще. Вы можете добавить это в файл конфигурации webpack...

sassLoader: {
  includePaths: [
    path.resolve(__dirname, './sass')
  ]
},

затем вы можете включить файлы из корня ваших проектов /sass каталог свободно, не беспокоясь о пути.

Если вы храните все свои компоненты в одном каталоге, ваш путь к вашим настройкам.scss всегда останется неизменной.

это желаемая функциональность webpack. Принцип состоит в том, чтобы иметь как можно меньше глобалов и включать только то, что вам нужно, сохраняя ваш проект бережливым, эффективным и простым в рассуждении.

Возможно, вам следует реструктурировать свои компоненты / стиль так, чтобы у вас не было так много пользовательских стилей в каждом компоненте Vue (создайте свой собственные?), поэтому вам не придется включать определенную таблицу стилей в каждый компонент Vue.

Это на самом деле не ответ на ваш вопрос, но это может привести вас к согласованию с принципами, лежащими в основе инструментов, которые вы выбрали для работы.

удачи!

там, к сожалению, не существует способа сделать это без импорта файла в каждом компоненте. Чтобы обойти это, вы можете попробовать создать вспомогательные классы с помощью color: $some-variable и background-color: $some-variable который может охватывать некоторые из ваших вариантов использования.

если вы импортируете файл в каждом из них, убедитесь, что он содержит только переменные. Вы не хотите включать правила стиля несколько раз.

в противном случае, я бы создал отдельную .scss файлы для каждого компонента. Вы все еще можете использовать .vue шаблоны для html и js, но держите свои стили отдельно. Это, пожалуй, самый эффективный способ сделать это.

для пользователей, использующих vue CLI, прочитайте https://cli.vuejs.org/guide/css.html#css-modules. Пример:

// vue.config.js
const fs = require('fs')

module.exports = {
  css: {
    loaderOptions: {
      // pass options to sass-loader
      sass: {
        // @/ is an alias to src/
        // so this assumes you have a file named `src/variables.scss`
        data: `@import "@/variables.scss";`
      }
    }
  }
}

это исправило его для меня отлично.

мое решение установлено settings.scss папка файла псевдоним в webpack,

может быть settings.scss не является глобальной потребностью, возможно, Вам также нужен подобный setting2.файл scss, но settings.scss конфликт с setting2.scss, в этом случае вы можете ввести только файл.

конфигурация webpack выглядит так:

resolve: {
  alias: {
    '~src': path.resolve(__dirname, '../src'),
    '~styles': path.resolve(__dirname, '../src/styles'),
}

таким образом, вы можете импортировать settings.scss в компоненте

<style lang="scss">
   @import "~styles/settings.scss";
</style>