Vue.js: всегда загружайте файл settings.scss в каждый раздел стиля vue

Я считаю, что повторяю этот же шаблон в каждом файле .vue, чтобы использовать переменные и т.д.:

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

  .someclass { color: $some-variable; }
</style>

или если он вложен в папку, которую я должен помнить, чтобы быть осторожным с этим путем:

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

</style>

Есть ли способ глобально импортировать этот settings.scss файл в каждый файл .vue, который я создаю? Я смотрел документы и не видел, но, может быть, я пропустил это, или, может быть, мне нужно использовать webpack?

ОТВЕТЫ

Ответ 1

Официальные документы обновлены с тех пор, как я задал этот вопрос: https://vue-loader.vuejs.org/en/configurations/pre-processors.html

Для других пользователей, просматривающих это в 2017 году и далее, ознакомьтесь с инструкциями в разделе "Загрузка файла глобальных настроек".

Ответ 2

Я полагаю, вы используете webpack? Вы можете потребовать файл settings.scss в файле app.js примерно так:

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

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

Ответ 3

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

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

/src/scss/globals.scss

Теперь вы можете просто отредактировать конфигурацию vue-loader:

loaders: {
  sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1&[email protected] "./src/scss/globals"',
  scss: '[email protected] "./src/scss/globals";'
}

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

Update:

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

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

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

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

Вам просто нужно изменить конкретную строку scss/sass на следующее:

 return {
   ...
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders(['css', '[email protected] "~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', '[email protected]"~assets/scss/main";']),
           ...
         }
        ...

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

Ответ 4

Если вы используете шаблон веб-пакета Vue, вы можете исправить его одной строкой кода в build/utils.js: scss: generateLoaders(['css', '[email protected] "~assets/styles/app";'])

Затем в src/assets/styles/app вы добавите все @imports и voilà!

Ответ 5

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

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

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

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

Ответ 6

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

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

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

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

Удачи!

Ответ 7

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

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

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

Ответ 8

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

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

webpack config:

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

поэтому вы можете импортировать settings.scss в свой компонент

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