Что такое CSS с областью действия?vue-104

Vue Loader предоставляет встроенную поддержку популярных CSS-препроцессоров и языков шаблонов. Рассмотрим полную настройку для работы с ними.

1. Поддерживаемые препроцессоры

Vue Loader работает с:

  • CSS: Sass/SCSS, Less, Stylus
  • Шаблоны: Pug
  • JavaScript: TypeScript, CoffeeScript

2. Установка необходимых пакетов

Для каждого препроцессора нужны свои зависимости:

# Для Sass/SCSS
npm install -D sass-loader sass

# Для Less
npm install -D less-loader less

# Для Stylus
npm install -D stylus-loader stylus

# Для Pug
npm install -D pug pug-plain-loader

3. Настройка в Webpack

Добавляем правила в webpack.config.js:

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.less$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'less-loader'
        ]
      },
      {
        test: /\.styl(us)?$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'stylus-loader'
        ]
      },
      {
        test: /\.pug$/,
        oneOf: [
          {
            resourceQuery: /^\?vue/,
            use: ['pug-plain-loader']
          },
          {
            use: ['raw-loader', 'pug-plain-loader']
          }
        ]
      }
    ]
  }
}

4. Использование в компонентах

Для стилей :

<style lang="scss" scoped>
$primary-color: #42b983;

.button {
  background: $primary-color;

  &:hover {
    background: darken($primary-color, 10%);
  }
}
</style>

Для шаблонов :

<template lang="pug">
div.app
  h1.title {{ message }}
  button(@click="handleClick") Click me
</template>

5. Глобальные переменные и миксины

Для SCSS/LESS можно добавить глобальные файлы:

{
  loader: 'sass-loader',
  options: {
    additionalData: `
      @import "@/styles/variables.scss";
      @import "@/styles/mixins.scss";
    `
  }
}

6. Настройка в Vue CLI

В vue.config.js можно упростить конфигурацию:

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        additionalData: `@import "```@/styles/main.scss";`
      },
      less: {
        modifyVars: {
          'primary-color': '#42b983'
        }
      }
    }
  }
}

7. Особенности работы с TypeScript

Для TS нужна дополнительная настройка:

{
  test: /\.ts$/,
  loader: 'ts-loader',
  options: {
    appendTsSuffixTo: [/\.vue$/]
  }
}

8. Кастомизация препроцессоров

Пример настройки Stylus с плагинами:

{
  loader: 'stylus-loader',
  options: {
    use: [require('nib')()],
    import: ['```nib/lib/nib/index.styl']
  }
}

9. Оптимизация для production

Добавляем минификацию:

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')

module.exports = {
  optimization: {
    minimizer: [
      new CssMinimizerPlugin()
    ]
  }
}

Резюмируем:

Vue Loader обеспечивает простую интеграцию с популярными препроцессорами через соответствующие загрузчики. Правильная настройка включает установку необходимых пакетов, конфигурацию webpack-правил и опциональное добавление глобальных стилей. Для production-сборок важно добавлять минификацию CSS.

Вопросы

Собеседования