解决的问题:
js想获取样式文件(css、less、scss)中的字符串内容时,可以通过
// npm install raw-loader less-loader
require('!!raw-loader!less-loader!.style.less').default.toString()
的方式获取;但这种方式获取的css内容无法压缩。
解决:
// 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 `var styleModule = require(${requestPath});module.exports = (styleModule.default || styleModule).toString();`;
}
使用:
require('!!./raw-loader.js!less-loader!./style.less');
require('!!./raw-loader.js!./style.css');