nextjs 写 css loader 处理多地区不同基础变量的方法

由于项目在多地区进行发布，为了复用，主工程使用同一个，但是这样会带来一个问题，由于地区的设备分布不同，以及当地的字体选择不一样，从而导致了 global 中的一些熟悉无法复用，而且必须配置两套，那么如何来解决这个问题呢？

解决思路方法

由于项目中有一个非常基础的变量模块，暂且叫做 basic.scss ，然后在很多 scss 文件中都对该文件进行了引用，现在需要区分多个地区的基础配置，那么直接复制一份 basic.scss ，命名为 basic-[country].scss ，接下来就是要找到引用 basic.scss 的地方，然后在打包的时候将其替换为 basic-[country].scss 具体的国家或者地区就可以了。

那么这里就有问题是，怎么去找到这个文件，并且把引用关联找到，最后再替换，这种打包类的问题，当然 webpack 是首选。

webpack 选择

一开始思路是使用 webpack 来解决这个问题，那么到底是使用 loader 还是 plugin 呢？这里就需要去思考 loader 和 plugin 的区别。

这里引用一段说明：

作用不同

• Loader直译为"加载器"。Webpack将一切文件视为模块，但是webpack原生是只能解析js文件，如果想将其他文件也打包的话，就会用到loader。 所以Loader的作用是让webpack拥有了加载和解析非JavaScript文件的能力。
• Plugin直译为"插件"。Plugin可以扩展webpack的功能，让webpack具有更多的灵活性。 在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。

用法不同

• Loader在module.rules中配置，也就是说作为模块的解析规则而存在。 类型为数组，每一项都是一个Object，里面描述了对于什么类型的文件（test），使用什么加载(loader)和使用的参数（options）
• Plugin在plugins中单独配置。 类型为数组，每一项是一个plugin的实例，参数都通过构造函数传入。

其实看到第一段就有答案了，webpack 原生是只能解析 js 文件，如果想要其他文件也打包的话，就需要使用到 loader ，所以这里我们选择使用 loader 来处理。

loader 插件选择

在 loader 插件中有一个插件一下进入了视野，那就是 string-replace-loader 我们看下他的一个例子：

module.exports = {
   
   
  // ...
  module: {
   
   
    rules: [
      {
   
   
        test: /fileInWhichJQueryIsUndefined\.js$/,
        loader: 'string-replace-loader',
        options: {
   
   
          search: '$',
          replace: 'window.jQuery',
        }
      }
    ]
  }
}

用法也比较简单，使用正则查询需要处理的文件，然后使用 string-replace-loader 来处理，参数第一个 search 查询需要替换的字符串，第二个是需要替换成的字符串。

想到这里，那么直接修改为下面这个方式不就可以了吗？

module.exports = {
   
   
  // ...
  module: {
   
   
    rules: [
      {
   
   
        test: /[\s][\S]\.scss$/,
        loader: 'string-replace-loader',
        options: {
   
   
          search: 'basic.scss',
          replace: 'basic-[country].scss',
        }
      }
    ]
  }
}

如果你自己写的 webpack 插件确实是这样就行了，但是由于我们使用的是 nextjs 框架，webpack 是自动生成的，因此我们需要看看 nextjs 如何应用。

nextjs 接入

nextjs 官方有提供 loader 或者 plugin 的写法，以下是官方的例子

module.exports = {
   
   
  webpack: (config, options) => {
   
   
    config.module.rules.push({
   
   
      test: /\.mdx/,
      use