vue-cli3配置postcss-loader使用BEM

時間 2021-02-15

標籤 css vue git github vue-cli json post spa 插件欄目 CSS 简体版

原文原文鏈接

網上找了不少文章，但也沒看到幾個是實用的，並且不少是2017年左右的文章，用到的技術 postcss-cssnext已經被棄用，目前使用 postcss-preset-env替換，但這個插件不完善，或者是我沒找到解決辦法，存在一部分問題，但使用BEM寫法是沒什麼問題的。

BEM寫法示例：

<template>
    <div class="ga-home__container">
        ...
    </div>
</template>

<style> 
@component-namespace ga {
  @b home {
    @e container {
      width: 100%;
      height: 100%;
      color: #a2eeff;
    }
  }
} </style>

vue2.x配置BEM

使用到插件postcss-salad進行配置；
在目錄.postcssrc.js，配置postcss-salad便可；css

// 使用的版本號
// "postcss": "^5.2.17",
// "postcss-salad": "^1.0.8",

// .postcssrc.js

var salad = require('postcss-salad')
module.exports = {
  "plugins": [
    // to edit target browsers: use "browserlist" field in package.json
    salad({
      browser: ['ie > 9', 'last 2 version'],
      features: {
        'bem': {
          'shortcuts': {
            'component': 'b',
            'modifier': 'm',
            'descendent': 'e'
          },
          'separators': {
            'descendent': '__',
            'modifier': '--'
          }
        }
      }
    })
  ]
}

vue-cli3配置BEM寫法

使用到的插件postcss-bem-fix、postcss-preset-env；
【注意】：postcss-bem好比舊版，目前捨不得postcss-bem-fix
能夠查看如下文章：
《postss-bem version is too low》
《棄用cssnext》vue

// 使用的版本號
// "postcss-bem-fix": "^2.1.0",
// "postcss-preset-env": "^6.7.0"

const POSBEM = require('postcss-bem-fix')
const POSENV = require('postcss-preset-env')
module.exports = {
  plugins: [
    POSBEM({
      style: 'suit', // suit or bem, suit by default,
      separators: {
        'descendent': '__',
        'modifier': '--'
      },
      shortcuts: {
        'component': 'b',
        'modifier': 'm',
        'descendent': 'e'
      }
    }),
    POSENV({
      browsers: ['> 1%', 'last 2 versions'],
      stage: 4,
      preserve: false, // instruct all plugins to omit pre-polyfilled CSS
      features: {
        'custom-properties': true
      },
      "autoprefixer": {}
    })
  ]
}