postCSS-loader配置,让css随心所欲

发表于 | 更新于: | 分类于 |
字数统计: 447 | 阅读时长 ≈ 2

postCSS-loader配置,让css随心所欲

组件必不可少的一部分就是 css，这里看下关于 css的一些 loaders。

PostCSS

PostCSS 官网是这么介绍自己的：

PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.

他是一款通过 JS 插件转换 styles 样式的工具。

在 webpack 里面可以通过 postCSS-loader 来使用 PostCSS。

使用

首先是安装 postCSS-loader

npm install postcss-loader --save-dev

下面是一个 webpack config 的例子：

var precss       = require('precss'); // 实现类Sass的功能，变量，嵌套，mixins
var autoprefixer = require('autoprefixer'); // 自动添加浏览器前缀

module.exports = {
    module: {
        loaders: [
            {
                test:   /\.css$/,
                loader: "style-loader!css-loader!postcss-loader" //在使用 css-loader,style-loader之前处理
            }
        ]
    },
    postcss: function () { // postcss 插件
        return [precss, autoprefixer];
    }
}

上面的例子使用了两个 postcss 插件，应该预先安装：

npm install precss --save-dev
npm install autoprefixer --save-dev

在文件中引入的css将通过 PostCSS 插件的处理:

var css = require('./file.css');
or
import './file.css'
// => CSS after Autoprefixer and CSSWring

插件组

如果你想对不同目录或类型的 css使用不同的 PostCSS 插件配置进行处理，可以使用 ?pack=name 参数

module.exports = {
    module: {
        loaders: [
            {
                test:   /\.docs\.css$/,
                loader: "style-loader!css-loader!postcss-loader?pack=cleaner" // 对docs目录下的css使用 cleaner 的配置
            },
            {
                test:   /\.css$/,
                loader: "style-loader!css-loader!postcss-loader" // 对其他目录下的css使用 defaults 的配置
            }
        ]
    },
    postcss: function () {
        return {
            defaults: [precss, autoprefixer],
            cleaner:  [autoprefixer({ browsers: [] })]
        };
    }
}

写在 js 中的样式

可以通过 postcss-js 插件处理写在 js 中的样式

{
    test:   /\.style.js$/,
    loader: "style-loader!css-loader!postcss-loader?parser=postcss-js"
}

也可以通过 babel 结合 postcss-js 处理 es6 语法中的样式

{
    test:   /\.style.js$/,
    loader: "style-loader!css-loader!postcss-loader?parser=postcss-js!babel"
}

你可以像下面这样写样式

import colors from '../config/colors';

export default {
    '.menu': {
        color: colors.main,
        height: 25,
        '&_link': {
            color: 'white'
        }
    }
}
0%