less-loader 设置 options

LESS 是一种动态样式语言，它可以扩展 CSS 语言，包括变量、混入、函数等等。它在前端开发中广泛应用于样式的编写（如 Bootstrap 4 中就使用了 LESS）。而 LESS-Loader 是 Webpack 中的一个 loader，它可以将 LESS 文件编译成 CSS 文件，同时也支持一些 options 的设置来满足我们的需求。

本文将会介绍 LESS-Loader 中一些常用的 options 以及它们的含义和使用方法。

引入 LESS-Loader

在使用 LESS-Loader 之前，需要先安装相应的依赖，使用 npm 直接进行安装。

npm install less less-loader --save-dev

这里安装了 less 和 less-loader，其中 less 是 LESS 的编译器，而 less-loader 则是一个 LESS 文件的 loader。

在 Webpack 的配置文件中引入 less-loader：

module.exports = {
  // ...
  module: {
    rules: [{
      test: /\.less$/,
      use: [
        'style-loader',
        'css-loader',
        'less-loader',
      ],
    }],
  },
};

这里使用了 style-loader、css-loader 和 less-loader 进行 LESS 文件的编译和样式插入。

常用 Options

lessOptions

lessOptions 可以用来设置 LESS 的编译选项，这个选项是传递给 LESS 编译器的参数。

sourceMap

如果你经常调试 CSS 样式，使用 SourceMap 可以极大地方便你的工作，它使得你在浏览器中查看样式代码时能够很方便地找到它在 LESS 文件中的位置。

module.exports = {
  // ...
  module: {
    rules: [{
      test: /\.less$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            // Enable SourceMap
            sourceMap: true,
          },
        },
        {
          loader: 'less-loader',
          options: {
            // Enable SourceMap
            sourceMap: true,
          },
        },
      ],
    }],
  },
};

其中 sourceMap 选项需要在 css-loader 和 less-loader 中都进行设置。

modifyVars

modifyVars 可以用来在 LESS 文件中定义变量，它对应一个对象，对象的键代表 LESS 中定义的变量名，值代表它的值。

// variables.less
@primary-color: #1890ff;

// index.less
@import "variables.less";
h1 {
  color: @primary-color;
}

可以通过 lessOptions 设置 modifyVars，然后在 LESS 文件中直接使用变量名。

module.exports = {
  // ...
  module: {
    rules: [{
      test: /\.less$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            modules: true,
          },
        },
        {
          loader: 'less-loader',
          options: {
            // Define variables
            lessOptions: {
              modifyVars: {
                'primary-color': '#1890ff',
              },
            },
          },
        },
      ],
    }],
  },
};

prependData

prependData 可以用来向 LESS 文件中添加额外的内容，它对应一个字符串，这个字符串将会在 LESS 文件的开头添加。

这个选项可以用来向 LESS 文件中添加全局样式、全局变量等等。

// variables.less
@primary-color: green;

// index.less
@import "variables.less";
h1 {
  color: @primary-color;
}

module.exports = {
  // ...
  module: {
    rules: [{
      test: /\.less$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            modules: true,
          },
        },
        {
          loader: 'less-loader',
          options: {
            // Prepend data
            prependData: '@import "variables.less";',
          },
        },
      ],
    }],
  },
};

在这个示例中，我使用了 prependData 将 variables.less 文件的内容添加进了 index.less 文件中。

总结

LESS-Loader 中有很多选项，它们可以用来满足我们不同的需求。本文介绍了其中常用的两个选项 lessOptions 和 prependData，它们分别可以用来设置 LESS 的编译选项和向 LESS 文件中添加全局样式和变量。

如果你想了解更多的选项以及它们的使用方法，你可以查看官方文档。

示例代码：

module.exports = {
  // ...
  module: {
    rules: [{
      test: /\.less$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            modules: true,
          },
        },
        {
          loader: 'less-loader',
          options: {
            // Define variables
            lessOptions: {
              modifyVars: {
                'primary-color': '#1890ff',
              },
            },
            // Prepend data
            prependData: '@import "variables.less";',
          },
        },
      ],
    }],
  },
};

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b6fd25add4f0e0fff99f81