六、输入变量

CSS Modules 支持使用变量，不过需要安装 PostCSS 和 postcss-modules-values。

 $ npm install --save postcss-loader postcss-modules-values

把postcss-loader加入webpack.config.js。

 var values = require("postcss-modules-values");
 
 module.exports = {
   entry: __dirname + "/index.js",
   output: {
     publicPath: "/",
     filename: "./bundle.js"
   },
   module: {
     loaders: [
      {
         test: /.jsx?$/,
         exclude: /node_modules/,
         loader: "babel",
         query: {
           presets: ["es2015", "stage-0", "react"]
         }
       },
       {
         test: /.css$/,
         loader: "style-loader!css-loader?modules!postcss-loader"
       },
     ]
   },
   postcss: [
     values
   ]
 };

接着，在colors.css里面定义变量。

 @value blue: #0c77f8;
 @value red: #ff0000;
 @value green: #aaf200;

App.css可以引用这些变量。

 @value colors: "./colors.css";
 @value blue, red, green from colors;
 
 .title {
   color: red;
   background-color: blue;
 }

运行这个示例。

 $ npm run demo06

打开http://localhost:8080，会看到蓝色的背景上有一个红色的h1。