webpack 4 配置模块化样式（css/less..）

本人在配置的时候找了好多资料，没有直接一套配置的文章， 因为这个比较重要， 随手写下笔记

先安装一些loader

npm install --save-dev less-loader css-loader style-loader  less

这里我用的是less， 不用less的可以忽略

然后进行修改脚手架， 本人是这样情况， 没需求的请忽略。(vue的好像是默认开启的， ng的好像是关闭的， 我用的是不出名的框架就不讲了)

npm run eject

然后找到配置文件。 webpack module下面的 rules push一个配置

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          'style-loader',
          { loader: 'css-loader', options: { importLoaders: 1 } },
          'less-loader'
        ]
      }
    ]
  }
}

当然还有其他方式， 这里用config的方式。 然后上面这个是官方推荐的配置。（我是不推荐的， 我们肯定要改的， 因为要模块化， 全打包在一起， 样式会冲突的， 一般也叫scoped, VUE就是这么叫的）

这里可以先看下导入的是什么东西

import styles from './emmm.less'

打印styles， console.log(styles.toString())发现是个字符串， 因为有css-loader这个玩意， 去掉就没了， 同时head里面会添加一个style。

为了达到scoped的目的， 我们需要安装postcss-loader

npm i -D postcss-loader

然后修改配置文件， 下面的代码同时加了autoprefixer跟cssnano, npm安装下就好了。
这是最终的配置

{
        test: /\.(css|less)$/,
        use: [
          'style-loader',
          { loader: 'css-loader', options: { modules: true, importLoaders: 1 } },
          {
            loader: 'postcss-loader',
            options: {           // 如果没有options这个选项将会报错 No PostCSS Config found
              plugins: (loader) => [
                require('postcss-import')({ root: loader.resourcePath }),
                require('autoprefixer')(), //CSS浏览器兼容
                require('cssnano')()  //压缩css
              ]
            }
          }
        ]
      }

然后使用它

import styles from './test.less'

<div className={styles.red}>~~</div>

渲染的时候

class="_1RLAUWst1roAsaOTU7r3w8"

这里我推荐一个库， 就是对class进行控制的库 classNames

npm install classnames --save

大概这样配合使用

<div className={classNames(styles.inputs, 'row center-xs middle-xs')}>

--END--

相关链接:
https://webpack.js.org/loaders/less-loader/
https://github.com/postcss/postcss-loader
https://github.com/JedWatson/classnames