简介：

在前端开发工作中，我们经常会碰到给css类名添加前缀的需求，以防止样式冲突。比如使用了不同的css框架，但是有类名重复、样式不同的情况，这时候如果能将其中一个框架的类名添加前缀，相比也是极好的。今天我们就以bootstrap为例，给大家介绍一个实现给bootstrap添加前缀的方法。

准备：

为了快速开始项目，我们这里假设你已经安装nodejs，vue-cli工具。

1. 我们用vue-cli生成一个项目，并在命令行交互中选择启用sass

vue init webpack-simple css-prefix

2. 我们安装bootstrap-sass并保存

npm install bootstrap-sass --save

3. 我们在App.vue中配置bootstrap sass的入口

<style>

$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";

@import '~bootstrap-sass/assets/stylesheets/bootstrap';

</style>

构建：

我们先安装一个postcss插件

npm install postcss-class-prefix --save-dev

在webpack.config.js中配置vue的loader

{

test: /\.vue$/,

loader: 'vue-loader',

options: {

loaders: {

// Since sass-loader (weirdly) has SCSS as its default parse mode, we map

// the "scss" and "sass" values for the lang attribute to the right configs here.

// other preprocessors should work out of the box, no loader config like this necessary.

'scss': 'vue-style-loader!css-loader!sass-loader',

'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'

},

postcss: [require('postcss-class-prefix')('prefix-')]

// other vue-loader options go here

}

}

3. 在App.vue模板中添加一个button

<button class="prefix-btn prefix-btn-primary">button with <code>prefix-</code> class</button>

4. 执行npm run dev，这时候我们能够看到prefix-在css中生效了！并且我们仍然可以用常规的方式写sass而不用关心前缀！

改进：

上面我们已经可以对css class添加前缀了，但是对于复杂选择符一起使用就有问题了比如tag.class等这样的类名并没有替换。原因是postcss-class-prefix这个插件已经不再维护，有人改进了这个插件，我们可以把改进后的插件放到本地来使用。

postcss: [require('./css-prefix.js')('prefix-')]

这个改进后的插件demo，我放到了github上：

总结：

通过上面的实践，我们学会了如何给css class添加类名前缀，可以使用前缀的形式隔离命名空间，提高了写样式的灵活性。