likes
comments
collection
share

webpack通过内联loader的方式获取样式文件（css、less、scss）的字符串内容（并压

作者站长头像
站长
· 阅读数 28

解决的问题：

js想获取样式文件（css、less、scss）中的字符串内容时，可以通过以下方式获取；但这种方式获取的css内容无法压缩。

// npm install raw-loader less-loader
require('!!raw-loader!less-loader!.style.less').default.toString()

解决：通过加入 postcss-loader 的方式压缩结果

// npm install css-loader postcss-loader postcss less-loader
require('!!css-loader?sourceMap=false!postcss-loader?{"postcssOptions":{"plugins":{"cssnano":{}}}}!less-loader!./style.less').default.toString();

优化：

因为require无法使用变量，所以每次都需要写很长的前缀；所以将压缩功能封装成一个自定义的webpack loader，隐藏其中的压缩工作：

raw-loader.js

module.exports = function rawLoader() {
  
}
module.exports.pitch = function(remainingRequest) {
  const loaderUtils = require('loader-utils');
  const requestPath = loaderUtils.stringifyRequest(this, `!!css-loader?sourceMap=false!postcss-loader?{"postcssOptions":{"plugins":{"cssnano":{}}}}!${remainingRequest}`);

  return `module.exports = require(${requestPath}).default.toString();`;
}

使用：

require('!!./raw-loader.js!less-loader!./style.less');
require('!!./raw-loader.js!./style.css');