Css files in vue

Adding CSS to a Vue.js Project

This is part of a series of articles starting with “Working with CSS in Vue.js”. Focus in this article is on different ways of adding CSS to a Vue.js project.

Separate Global Style Files

If you prefer to keep your style files separate from the .vue files and their style tags, similar to a workflow without a framework, this can be achieved. Setting up the style files this way means the styling will be applied to your template sections, but not available in component style tags. Note: For example, if you create a SCSS variable in your style file, it will not be recognized if you try to use it within a component style tag. To get global styles available in component style tags, see the article about importing global styles in component style tags. Set up your folder and file structure for your style files, for example src/styles/style.scss. If you use a structure with folders, _filename.scss and SCSS imports, this will work provided you have added SCSS support. (See the article “Working with CSS in Vue.js” on adding SCSS support.) In your main.js file, import your styles below the Vue import:

Style Tags in Vue Files

The default version of handling CSS is to write your styles in the vue file style tags. Styles written in this way are global. Styles defined here are available in the project’s other .vue files.

Scoped Styletags

Scoping means adding data attributes to the different classes to keep them from leaking styles to one another. Scoping is similar to CSS Modules (read more about this in the article “CSS Modules in Vue.js”). Add “scoped” to the component style tag in the .vue file:

 scoped> /*add scoped styles here*/  

Style Cascading

If a child component has a class name that is shared by its parent component, the parent component style will cascade to the child. Read more about nesting with the deep selector in the documentation. To target children of scoped parents, use: .parent >>> child < /*styles*/ >Which syntax works depends on which preprocessor is used. Possible syntaxes are also: .parent /deep/ child < /*styles*/ >.parent ::v-deep child < /*styles*/ >Read more about this in the vue-loader documentation.

Setup

The starting code for this article is created by the Vue CLI command tool version 3.3.0 and Vue.js version 2.6.10. Note that both setup, plugins and framework are evolving. Changes will in time most certainly happen that make the techniques described in this post less relevant.

Источник

Работа с CSS #

Проекты Vue CLI предоставляют поддержку для PostCSS, CSS-модулей, а также пре-процессоров, включая Sass, Less и Stylus.

Указание ссылок на ресурсы #

Весь скомпилированный CSS обрабатывается css-loader, который будет парсить url() и разрешать их как зависимостями модуля. Это означает, что вы можете ссылаться на ресурсы, используя относительные пути на основе локальной файловой структуры. Обратите внимание, что если вы хотите ссылаться на файл внутри npm-зависимости или через псевдоним webpack, путь должен начинаться с префикса ~ для избежания двусмысленности. Подробнее в разделе Обработка статических ресурсов.

Пре-процессоры #

Вы можете выбрать пре-процессоры (Sass/Less/Stylus) при создании проекта. Если вы этого не сделали, то внутренняя конфигурация webpack всё равно настроена для их использования. Вам лишь требуется вручную доустановить соответствующие загрузчики для webpack:

# Sass npm install -D sass-loader sass # Less npm install -D less-loader less # Stylus npm install -D stylus-loader stylus 

Примечание при использовании webpack 4

При использовании webpack версии 4, по умолчанию во Vue CLI 4, следует убедиться в совместимости используемых загрузчиков. В противном случае будут появляться ошибки о конфликтующих зависимостях. В таких случаях можно использовать более старую версию загрузчика, которая всё ещё совместима с webpack 4.

# Sass npm install -D sass-loader@^10 sass 

Теперь вы можете импортировать соответствующие типы файлов, или использовать их синтаксис внутри файлов *.vue с помощью:

style lang="scss"> $color: red; style> 

Совет по производительности Sass

Обратите внимание, при использовании Dart Sass синхронная компиляция вдвое быстрее асинхронной по умолчанию, из-за накладных расходов на асинхронные коллбэки. Чтобы избежать их можно воспользоваться пакетом fibers для вызова асинхронных импортёров по пути синхронного кода. Для этого просто установите fibers в качестве зависимости проекта:

Также имейте в виду, поскольку это нативный модуль, то могут возникнуть различные проблемы совместимости, в зависимости от ОС и окружения сборки. В таких случаях выполните npm uninstall -D fibers для устранения проблемы.

Автоматические импорты #

Если вы хотите автоматически импортировать файлы (для цветов, переменных, примесей. ), можно использовать style-resources-loader. Вот пример для stylus, который импортирует ./src/styles/imports.styl в каждый однофайловый компонент и в каждый файл stylus:

// vue.config.js const path = require('path') module.exports =  chainWebpack: config =>  const types = ['vue-modules', 'vue', 'normal-modules', 'normal'] types.forEach(type => addStyleResource(config.module.rule('stylus').oneOf(type))) >, > function addStyleResource (rule)  rule.use('style-resource') .loader('style-resources-loader') .options( patterns: [ path.resolve(__dirname, './src/styles/imports.styl'), ], >) > 

PostCSS #

Vue CLI использует PostCSS внутри себя.

Вы можете настроить PostCSS через .postcssrc или любую другую конфигурацию, которая поддерживается postcss-load-config, а также настраивать postcss-loader через опцию css.loaderOptions.postcss в файле vue.config.js .

Плагин autoprefixer включён по умолчанию. Чтобы определить целевые браузеры используйте поле browserslist в файле package.json .

Примечание о префиксных CSS правилах

В сборке для production Vue CLI оптимизирует ваш CSS и удаляет ненужные префиксные правила CSS, основываясь на целевых браузерах. С autoprefixer включённым по умолчанию, вы должны всегда использовать только CSS-правила без префиксов.

CSS-модули #

Для импорта CSS или других файлов пре-процессоров в качестве CSS-модулей в JavaScript, необходимо чтобы имя файла заканчивалось на .module.(css|less|sass|scss|styl) :

import styles from './foo.module.css' // работает для всех поддерживаемых пре-процессоров import sassStyles from './foo.module.scss' 

Если вы не хотите указывать .module в именах файлов, установите css.requireModuleExtension в false внутри файла vue.config.js :

// vue.config.js module.exports =  css:  requireModuleExtension: false > > 

Если вы хотите настроить генерируемые имена классов для CSS-модулей, вы можете сделать это с помощью опции css.loaderOptions.css в vue.config.js . Все настройки css-loader поддерживаются, например localIdentName и camelCase :

// vue.config.js module.exports =  css:  loaderOptions:  css:  // Примечание: формат конфигурации отличается между Vue CLI v4 и v3 // Для пользователей Vue CLI v3, обратитесь к документации css-loader v1 // https://github.com/webpack-contrib/css-loader/tree/v1.0.1 modules:  localIdentName: '[name]-[hash]' >, localsConvention: 'camelCaseOnly' > > > > 

Передача настроек в загрузчики пре-процессоров #

Иногда может возникнуть необходимость передать настройки в загрузчик пре-процессора для webpack. Вы можете сделать это с помощью опции css.loaderOptions в vue.config.js . Например, для передачи глобальных переменных во все стили Sass/Less:

// vue.config.js module.exports =  css:  loaderOptions:  // передача настроек в sass-loader // @/ это псевдоним к каталогу src/ поэтому предполагается, // что у вас в проекте есть файл `src/variables.scss` // Примечание: эта опция называется "prependData" в sass-loader v8 sass:  additionalData: `@import "~@/variables.sass"` >, // по умолчанию опция `sass` будет применяться к обоим синтаксисам // потому что синтаксис `scss` по сути также обрабатывается sass-loader // но при настройке опции `prependData` синтаксис `scss` требует точку с запятой // в конце оператора, в то время как для `sass` точки с запятой не требуется // в этом случае синтаксис `scss` можно настроить отдельно с помощью опции `scss` scss:  additionalData: `@import "~@/variables.scss";` >, // передача настроек Less.js в less-loader less: // http://lesscss.org/usage/#less-options-strict-units `Global Variables` // `primary` — имя поля глобальных переменных globalVars:  primary: '#fff' > > > > > 

Загрузчики которые можно настраивать с помощью опции loaderOptions :

Это предпочтительнее, чем вручную обращаться к конкретным загрузчикам, используя chainWebpack , потому что настройки необходимо применять в нескольких местах, где используется соответствующий загрузчик.

Источник

# Работа с CSS

, который будет парсить url() и разрешать их как зависимостями модуля. Это означает, что вы можете ссылаться на ресурсы, используя относительные пути на основе локальной файловой структуры. Обратите внимание, что если вы хотите ссылаться на файл внутри npm-зависимости или через псевдоним webpack, путь должен начинаться с префикса ~ для избежания двусмысленности. Подробнее в разделе Обработка статических ресурсов.

# Пре-процессоры

Вы можете выбрать пре-процессоры (Sass/Less/Stylus) при создании проекта. Если вы этого не сделали, то внутренняя конфигурация webpack всё равно настроена для их использования. Вам лишь требуется вручную доустановить соответствующие загрузчики для webpack:

# Sass npm install -D sass-loader node-sass # Less npm install -D less-loader less # Stylus npm install -D stylus-loader stylus 

Теперь вы можете импортировать соответствующие типы файлов, или использовать их синтаксис внутри файлов *.vue с помощью:

style lang="scss"> $color: red; style> 

# Автоматические импорты

Если вы хотите автоматически импортировать файлы (для цветов, переменных, примесей. ), можно использовать style-resources-loader

. Вот пример для stylus, который импортирует ./src/styles/imports.styl в каждый однофайловый компонент и в каждый файл stylus:

// vue.config.js const path = require('path') module.exports =  chainWebpack: config =>  const types = ['vue-modules', 'vue', 'normal-modules', 'normal'] types.forEach(type => addStyleResource(config.module.rule('stylus').oneOf(type))) >, > function addStyleResource (rule)  rule.use('style-resource') .loader('style-resources-loader') .options( patterns: [ path.resolve(__dirname, './src/styles/imports.styl'), ], >) > 

# PostCSS

Vue CLI использует PostCSS внутри себя.

Вы можете настроить PostCSS через .postcssrc или любую другую конфигурацию, которая поддерживается postcss-load-config

через опцию css.loaderOptions.postcss в файле vue.config.js .

включён по умолчанию. Чтобы определить целевые браузеры используйте поле browserslist в файле package.json .

Примечание о префиксных CSS правилах

В сборке для production Vue CLI оптимизирует ваш CSS и удаляет ненужные префиксные правила CSS, основываясь на целевых браузерах. С autoprefixer включённым по умолчанию, вы должны всегда использовать только CSS-правила без префиксов.

# CSS-модули

доступны из коробки с помощью .

Для импорта CSS или других файлов пре-процессоров в качестве CSS-модулей в JavaScript, необходимо чтобы имя файла заканчивалось на .module.(css|less|sass|scss|styl) :

import styles from './foo.module.css' // работает для всех поддерживаемых пре-процессоров import sassStyles from './foo.module.scss' 

Если вы не хотите указывать .module в именах файлов, установите css.modules в true внутри файла vue.config.js :

// vue.config.js module.exports =  css:  modules: true > > 

Если вы хотите настроить генерируемые имена классов для CSS-модулей, вы можете сделать это с помощью опции css.loaderOptions.css в vue.config.js . Все настройки css-loader поддерживаются, например localIdentName и camelCase :

// vue.config.js module.exports =  css:  loaderOptions:  css:  localIdentName: '[name]-[hash]', camelCase: 'only' > > > > 

# Передача настроек в загрузчики пре-процессоров

Иногда может возникнуть необходимость передать настройки в загрузчик пре-процессора для webpack. Вы можете сделать это с помощью опции css.loaderOptions в vue.config.js . Например, для передачи глобальных переменных во все стили Sass/Less:

// vue.config.js module.exports =  css:  loaderOptions:  // передача настроек в sass-loader sass:  // @/ это псевдоним к каталогу src/ поэтому предполагается, // что у вас в проекте есть файл `src/variables.scss` data: `@import "~@/variables.scss";` >, // передача настроек Less.js в less-loader less: // http://lesscss.org/usage/#less-options-strict-units `Global Variables` // `primary` — имя поля глобальных переменных globalVars:  primary: '#fff' > > > > > 

Загрузчики которые можно настраивать с помощью опции loaderOptions :

Это предпочтительнее, чем вручную обращаться к конкретным загрузчикам, используя chainWebpack , потому что настройки необходимо применять в нескольких местах, где используется соответствующий загрузчик.

Источник