在vue-cli中使用css-loader实现css module

在vue-cli中使用css-loader实现css module 需要根据以下步骤进行操作：

1. 安装依赖项

在使用 css-loader 实现 css module 前，我们需要先安装依赖项，命令如下：

npm install --save-dev css-loader

2. 修改 vue.config.js 配置文件

在根目录下创建 vue.config.js 文件，然后修改其中的配置信息，以使用 css-loader 实现 css module。具体来说，需要新增如下的 module 和 rule 配置：

// vue.config.js

module.exports = {
  // ...
  // 添加 module 配置
  module: {
    rules: [
      // 添加 css-loader 配置
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          }
        ]
      }
    ]
  }
}

在 css-loader 选项中开启 modules 选项即可启用 css module 功能。

3. 编写样式文件

在编写样式文件时，我们需要遵循以下命名规则：

• 如果要应用全局样式，则以普通方式命名，如 app.css。
• 如果要应用局部样式，则需要将文件名以 .module.css 结尾，如 app.module.css。

下面是示例代码：

/* app.module.css */
.container {
  color: #333;
  font-size: 16px;
}

/* app.css */
.btn {
  color: #fff;
  background: #1890ff;
  border: none;
  border-radius: 2px;
  padding: 6px 12px;
}

4. 使用样式

最后，在 Vue.js 组件中使用样式时，需要根据文件名后缀名的不同使用不同方式，示例代码如下：

<template>
  <div class="container">
    <button class="btn">Click</button>
  </div>
</template>

<script>
import styles from './app.module.css'; // 使用局部样式文件
import './app.css'; // 使用全局样式文件

export default {
  name: 'App',
  // 在样式文件中定义的类名可以通过 $style 对象访问
  mounted() {
    console.log(styles.container);
  }
}
</script>

通过 $style 对象访问样式文件中定义的类名即可。