Управление CSS
Рекомендуемый способ управления CSS — просто использовать теги <style>
внутри однофайловых компонентов (*.vue
файлов), которые предоставляют:
- Локальный CSS для компонентов
- Возможность использования пре-процессоров или PostCSS
- Горячую перезагрузку при разработке
Что ещё более важно, загрузчик vue-style-loader
, используемый внутри vue-loader
, имеет некоторые особенности для серверного рендеринга:
Единый код для клиента и сервера.
Автоматизация критического CSS при использовании
bundleRenderer
.Если используется во время рендеринга на сервере, CSS компонента может быть собран и вставлен в HTML (автоматически обрабатывается при использовании опции
template
). На клиенте, когда компонент используется в первый раз,vue-style-loader
проверяет, есть ли уже встроенный сервером CSS для этого компонента, а если нет, CSS будет динамически встроен через тег<style>
.Извлечение общего CSS в отдельный файл.
Используется
extract-text-webpack-plugin
(opens new window) для извлечения CSS в основном (main) фрагменте в отдельный файл CSS (автоматически внедряемый сtemplate
), что позволяет кэшировать файл отдельно. Это рекомендуется, когда имеется много общего CSS.CSS внутри асинхронных компонентов остаётся встроенным в строки JavaScript и обрабатывается
vue-style-loader
.
Настройка извлечения CSS
Для извлечения CSS из *.vue
файлов в vue-loader
используется опция extractCSS
(требует vue-loader
12.0.0+):
// webpack.config.js
const ExtractTextPlugin = require('extract-text-webpack-plugin')
// извлечение CSS должно использоваться только в production
// чтобы работала горячая замена на этапе разработки.
const isProduction = process.env.NODE_ENV === 'production'
module.exports = {
// ...
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
// включаем извлечение CSS
extractCSS: isProduction
}
},
// ...
]
},
plugins: isProduction
// убедитесь что добавили плагин!
? [new ExtractTextPlugin({ filename: 'common.[chunkhash].css' })]
: []
}
Обратите внимание, что приведённая выше конфигурация применяется только к стилям в *.vue
файлах, но вы можете использовать <style src="./foo.css">
для импорта внешнего CSS в компоненты Vue.
Если вы хотите импортировать CSS из JavaScript, например import 'foo.css'
, вам потребуется настроить соответствующие загрузчики:
module.exports = {
// ...
module: {
rules: [
{
test: /\.css$/,
// важно: использовать vue-style-loader вместо style-loader
use: isProduction
? ExtractTextPlugin.extract({
use: 'css-loader',
fallback: 'vue-style-loader'
})
: ['vue-style-loader', 'css-loader']
}
]
},
// ...
}
Импорт стилей из NPM-зависимостей
Несколько вещей, которые нужно учитывать при импорте CSS из NPM-зависимостей:
Он не должен быть указан внешней зависимостью в серверной сборке.
Если использовать извлечение CSS + извлечение из вендоров с помощью
CommonsChunkPlugin
, уextract-text-webpack-plugin
будут возникать проблемы, если извлекаемый CSS находится внутри извлечённого фрагмента вендоров. Чтобы обойти это, избегайте подключения CSS файлов в фрагменте для вендоров. Пример конфигурации Webpack для клиентской части:
module.exports = {
// ...
plugins: [
// обычное дело, извлекать зависимости в фрагмент для вендоров для лучшего кэширования.
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function (module) {
// модуль извлекается в фрагмент для вендоров когда...
return (
// он находится внутри node_modules
/node_modules/.test(module.context) &&
// и не извлекать если запрос является CSS файлом
!/\.css$/.test(module.request)
)
}
}),
// извлекает Webpack runtime & manifest
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest'
}),
// ...
]
}