webpack添加sass处理，并启用css_module

最近在学习webpack的基本使用，一开始处理css，启用css_module都没有什么问题，想到之前使用 Ant Design Pro 框架的时候有用到scss，所以想看看scss怎么配置。

先上最开始的webpack对css配置

{
        test: /\.css$/i,    // 匹配.css后缀的文件
        use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader",
            options: {
              /***
               * 需要解决的问题
               * 全局污染
               * 命名混乱
               * 依赖管理不彻底
               * 无法共享变量
               * 代码压缩不彻底
               */
              modules: {  // 启用 css modules, css模块化, 所有类名都默认为当前组件, 或者使用 :global 声明全局样式, 参考 AntDesignPro 的样式引用
                localIdentName: '[name]__[local]--[hash:base64:5]'  // 指定样式名
              },  
            }
          }
        ]
      }

/*main.css*/
.he {
  font-size: 15px;
}

import styles from './main.css'
class Greeter extends Component {
  render() {
    return (
      <div>
        <div className={styles.he}>
          gggg
        </div>
        <ChildTest>
          <div>I'm child</div>
        </ChildTest>
        <Layout />
      </div>
      
    )
  }
}

这样配置完，引用的类都会自动添加hash值，只作用于当前组件，使得不会污染全局。

上图可以看到 .he 的类名被修改了，样式名如何修改见webpack中localIdentName的配置。

webpack的sass配置

// webpack配置1： 最开始我是这么配置的，能够编译通过但是使用import引入scss文件后拿到的是空对象
// 但是在写这篇文章的时候，又没问题了(-_-||)，具体原因不知(如果您知道，麻烦留下言)，如果配置有问题请试下文末的配置2。
	{
        test: /\.css$/i,
        use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader",
            options: {           
              modules: {
                localIdentName: '[name]__[local]--[hash:base64:5]'
              },  
            }
          },
        ]
     },
     {
        test: /\.(s[ac]ss)$/i,
        use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader",
            options: {           
              modules: {
                localIdentName: '[name]__[local]--[hash:base64:5]'
              },  
            }
          },
          {
            loader: 'sass-loader',
          }
        ]
     },

/*layout.scss*/
.out {
  .test {
    font-size: 33px;
  }
}

// Layout.js
import React, { Component } from 'react'
import styles from './layout.scss'
class Layout extends Component {
  render() {
    console.log(styles)

    return (
      <div className={styles.out}>
        <div className={styles.test}>layout</div>
      </div>
    )
  }
}
export default Layout

样式引用成功，sass配置成功

// webpack配置2: 在配置1不生效之后查找资料，最后写出配置2
	{
        test: /\.(s[ac]ss|css)$/i,
        use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader",
            options: {           
              modules: { 
                localIdentName: '[name]__[local]--[hash:base64:5]'
              },  
            }
          },
          {
            loader: 'sass-loader',
          }
        ]
      },

前端小白，如果大佬又发现问题的地方，希望您能够留下言告知我下Thanks♪(･ω･)ﾉ

参考链接：https://segmentfault.com/q/1010000007018498?_ea=1216860

最后附上整个webpack的配置：

const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')


module.exports = {
  mode: 'none', // 模式，三种值 development, production, none
  devtool: 'eval-source-map', // 生成 source map，使得调试更加容易。报错可以定位到相应的文件具体的行列。
  entry: __dirname + "/app/main.js",
  output: {
    path: __dirname + "/build",
    filename: 'bundle.js'
  },
  devServer: {  // 本地开启服务器, 需要 webpack-dev-server 插件, 需要在 package 中的 script 字段中配置 server
    contentBase: "./public",  // 本地服务器所加载的页面所在的目录
    historyApiFallback: true, // 不跳转
    inline: true, // 源文件改变实时刷新
    // port: '6666',
  },
  module: {
    rules: [
      {
        test: /(\.jsx|\.js)$/,
        use: {
          loader: "babel-loader",   // 注意 npm 包(babel-core, babel-loader)之间的版本兼容
          options: {
            presets: [
              "env", "react"
            ]
          }
        },
        exclude: /node_modules/
      },
      {
        test: /\.(s[ac]ss|css)$/i,    // 不能把 css 和 scss 分成两个单独进行配置
        use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader",
            options: {
              /***
               * 需要解决的问题
               * 全局污染
               * 命名混乱
               * 依赖管理不彻底
               * 无法共享变量
               * 代码压缩不彻底
               */
              modules: {  // 启用 css modules, css模块化, 所有类名都默认为当前组件, 或者使用 :global 声明全局样式, 参考 AntDesignPro 的样式引用
                localIdentName: '[name]__[local]--[hash:base64:5]'  // 指定样式名
                exportGlobals: true,	// 注意！:global 声明全局样式需要该属性
              },  
            }
          },
          {
            loader: 'sass-loader',
          }
        ]
      },
    ]
  },
  plugins: [
    new webpack.BannerPlugin('版权所有， 翻版必究'),
    new HtmlWebpackPlugin({
      template: __dirname + "/app/index.tmpl.html"  // 以该文件为模板生成最终的html(自动引入编译的js文件)
    })
  ]
}