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