typescript项目css modules

typescript项目中我们使用typings-for-css-modules-loader来替代css-loader实现css modules。

1、typings-for-css-modules-loader加载器介绍

Webpack加载器，用作 css-loader的替代产品，可动态生成 CSS模块的 TypeScript类型

这句话是什么意思呢？就是编译时处理css文件，为这些css文件生成对应的.d.ts声明文件并且具有css-loader功能，用import/require处理css引用资源（url和@import），使得css模块化，配置modules字段可以启用css modules。

为什么需要为css文件生成声明文件呢？因为在typescript项目中无论是我们自己写的代码还是导入第三方库和样式，都应该符合typescript语言规范，就比如在react+typescript项目中，安装了react、react-dom后还得安装@types/react、@types/react-dom，这两个库是react、react-dom的声明文件。

2、typings-for-css-modules-loader加载器使用

在typescript项目webpack配置如下：

{
    test: /\.(sc|sa|c)ss$/,
    include: [path.join(__dirname, '../', './src')],
    use: [
      // 'style-loader', // style-loader将第二步编译出来的代码转为js代码
      {
        loader: MiniCssExtractPlugin.loader,
        options: {
          publicPath: (resourcePath, context) => {
            // resourcePath = E:\学习项目\从零搭建typescript+react项目\ts-react\src\index.scss
            // context = E:\学习项目\从零搭建typescript+react项目\ts-react
            return path.relative(path.dirname(resourcePath), context) + '/';
          },
        }
      },
      // css-loader将编译出来的代码再次编译成为符合CommonJS的代码
      {
        loader: 'typings-for-css-modules-loader',
        options: {
          modules: true, // 使用css modules
          namedExport: true, // 类名导出
          camelCase: true, // 支持驼峰
          sass: true, // 是否使用sass
          localIdentName: '[name]__[local]__[hash:base64:5]' // 定义类名
        }
      },
      {
        // 给css加上前缀
        loader: 'postcss-loader',
        options: {
          plugins: [require('autoprefixer')]
        }
      },
      'sass-loader' // sass-loader将sass代码编译为css(默认使用node-sass)
    ]
}

简单解释下三个 Loader 的作用：

1. sass-loader 的作用当然是把 SASS 文件编译成 CSS 文件;
2. typings-for-css-modules-loader 是在 css-loader 上包了一层，它的选项完全兼容 css-loader。除此之外，它会为每个 SASS 文件生成对应的 xxx.scss.d.ts 的解释文件，这样在 TypeScript 中就可以正确解析，编辑器里面也能有非常友好的代码提示。
3. style-loader 就是把样式使用