CYB-CLI

# CSS相关

CYB CLI 天生支持 PostCSS、CSS Modules 和包含 Sass、Less、Stylus 在内的预处理器。

# PostCSS

CYB CLI 内部使用了 PostCSS。默认开启了 autoprefixer，我们如果要配置目标浏览器，可以通过cyb.config.js中的autoprefixer.options字段配置。CYB CLI 也支持通过postcss.config.js配置文件来配置PostCSS，如果使用了postcss.config.js配置文件，需要自行独立配置 autoprefixer。

# CSS Modules

你可以通过 <style module > 以开箱即用的方式使用 CSS Modules。 如果想在 JavaScript 中作为 CSS Modules 导入 CSS 或其它预处理文件，该文件应该以 .module.(css|less|sass|scss|styl) 结尾：

import styles from './foo.module.css'
// 所有支持的预处理器都一样工作
import sassStyles from './foo.module.scss'

如果你想去掉文件名中的 .module，可以设置 cyb.config.js 中的 webpack.cssLoader.options.module 为 true：

// cyb.config.js
module.exports = {
  webpack: {
    cssLoader: {
      options: {
        modules: true,
        import: true,
        importLoaders: 2
      }
    }
  }
}

# 向预处理器 Loader 传递选项

有的时候你想要向 webpack 的预处理器 loader 传递选项。你可以使用 cyb.config.js 中的 webpack 选项。支持的Loader包括：

module.exports = {
  webpack: {
    /**
     * css-loader配置
     */
    cssLoader: {
      options: {
        sourceMap: true
      }
    },
    /**
     * less-loader配置
     */
    lessLoader: {
      options: {
        sourceMap: true
      }
    },
    /**
     * sass-loader配置
     */
    sassLoader: {
      options: {
        sourceMap: true
      }
    },
    /**
     * stylus-loader配置
     */
    stylusLoader: {
      options: {
        sourceMap: true
      }
    }
  }
}

← Webpack相关 →