@symph/joy + LESS

在@symph/joy项目中使用.less样式，需要添加本插件。需要添加本插件。可使用不同的配置，创建多个插件实例，来处理不同模块下的样式。

安装

npm install --save @symph/joy-less

或者

yarn add @symph/joy-less

使用方法

开发模式时，使用webpack style-loader插件将样式打包到chunk代码中，以便实现热更新，即在修改样式后，不用刷新浏览器就可看到修改后的效果。

style-loader加载样式有个副作用，因为css样式是在js输出界面标签元素后，才注入到页面中的，所以开始会有一瞬间，html标签是没有样式的，界面可能会闪烁一下，这个问题在生产包里不可见的，也不会影响调试，请放心使用。

打生产包时，使用mini-css-extract-plugin来提取所有的样式到.joy/static/styles/style.css中，以便提高加载效率，这个文件的引用会自动添加到_document.js文档中，在初始请求的返回的html文档中，会包含该样式的引用。

关闭 CSS modules

如果不使用css modules, 在.less文件中定义的样式，都是全局的，任何地方都可以使用其定义的样式。

在项目中创建 joy.config.js 配置文件。

// joy.config.js
const withLess = require('@symph/joy-less')

module.exports = {
  plugins: [
    withLess()
  ]
}

创建一个LESS文件 src/style.less

.example {
  font-size: 50px;
}

创建界面组件 src/index.js，并使用样式。

import "../style.less"

export default () => <div className="example">Hello World!</div>

启用 CSS modules

如果开启css modules，.less文件中定义的样式名称，将只在这个less文件中可见，不会和其他less文件中定义同名样式冲突。外部使用这些样式时，需要通过import的方式来导入这个less文

// joy.config.js
const withLess = require('@symph/joy-less')
module.exports = {
  plugins: [
    withLess({cssModules: true})
  ]
}

创建LESS文件 style.less

.example {
  font-size: 50px;
}

创建界面组件 src/index.js，并使用样式。

import styles from "../style.less"

export default () => <div className={styles.example}>Hello World!</div>

启动CSS modules和自定义配置

你依然可以传递定义配置给css-loader，请使用cssLoaderOptions配置项。

例如, 创建带域名称的样式，代码如下:

// joy.config.js
const withLess = require('@symph/joy-less')
module.exports = {
  plugins: [
    withLess({
      cssModules: true,
      cssLoaderOptions: {
        localIdentName: "[local]___[hash:base64:5]",
      }
    })
  ]
}

创建LESS样式文件 styles.less。

.example {
  font-size: 50px;
}

创建界面组件 src/index.js，并使用带有域名和hash的样式名称。

import styles from "../style.less"

const Component = props => {
  return (
    <div className={styles.example}>
      ...
    </div>
  )
}

export default Component

如果你将其导出为静态页面，样式变量styles.example将转化为对应的字符串样式名称，例如：<div class="index_examole__f2ae1">。

css-loader支持的配置参数列表，请查阅 css-loader README.

PostCSS

在项目中创建 joy.config.js 配置文件

// joy.config.js
const withLess = require('@symph/joy-less')
module.exports = {
  plugins: [
    withLess()
  ]
}

在项目中创建PostCSS的配置文件 postcss.config.js，并添加postcss-css-variables插件来支持css变量。

module.exports = {
  plugins: {
    // Illustrational
    'postcss-css-variables': {}
  }
}

创建样式文件 src/style.less，此时.less文件中可使用postcss-css-variables插件提供的功能了。

:root {
  --some-color: red;
}

.example {
  /* red */
  color: var(--some-color);
}

如果postcss.config.js文件不存在，postcss-loader将不会生效，也不会添加到loader链中。

加载不同模块的样式

在项目中创建 joy.config.js 配置文件

const withLESS = require('@symph/joy-css')
const path = require('path')

module.exports = {
  plugins: [
    // 处理应用内的样式
    withLESS({
      cssModules: true,
      ruleOptions: {
        exclude: [
          path.resolve(__dirname, './node_modules/')
        ]
      }
    }),
    // 处理node_module中的样式
    withLESS({
      cssModules: false,
      ruleOptions: {
        include: [
          path.resolve(__dirname, './node_modules/')
        ]
      }
    })
  ]
}

自定义配置

你可以添加自定义的配置来定义如何加载和使用less样式。

// joy.config.js
const withLess = require('@symph/joy-less')
module.exports = {
  plugins: [
    withLess({cssModules: true})
  ]
}

cssModules

type: bool, default: false

是否开启CSS modules，使用参考：to enable locally scoped CSS modules.

extractCSSPlugin

type: mini-css-extract-plugin, default:

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const {CLIENT_STATIC_FILES_PATH}  = require('@symph/joy/constants')

extractCSSPlugin = new MiniCssExtractPlugin({
  filename: `${CLIENT_STATIC_FILES_PATH}/styles/[name].${dev ? '' : '[hash]'}.css`,
  chunkFilename: `${CLIENT_STATIC_FILES_PATH}/styles/style.[hash].css` //提取后的样式文件
})

如果这个值为空，插件将提供一个默认配置。

cssLoaderOptions

type: object, default:

{
  modules: cssModules,
  minimize: !dev,
  sourceMap: dev,
  importLoaders: loaders.length + (postcssLoader ? 1 : 0),
  localIdentName: '[name]_[local]_[hash:base64:5]'
}

可选配置项, 请查阅webpack css-loader README.

postcssLoaderOptions

type: object, default:

{
  config:{
    path: 'postcss.config.js'
  }
}

可选配置项, 请查阅postcss-loader README.

lessLoaderOptions

type: object, default:

{
  javascriptEnabled: true
}

可选配置项，请查阅webpack less-loader README.

ruleOptions

type: object, default:

{
  test: /\.less$/,
}

可用配置项，请查阅webpackConfig.module.rules。