extract-loader
extract-loader copied to clipboard
loaderContext.loadModule API throw error when using with css-loader
webpack.config.js:
rules: [{
test: /\.css$/,
use: [
'to-string-loader',
'extract-loader',
'css-loader',
]
My demo:
**### index.csss:**
@import './common.css';
text {
color: aliceblue;
background-image: url('https:www.baidu.com');
}
**common.css:**
body {
border: 1px solid orangered;
}
@import './page/page.css';
**page.css:**
input {
padding-left: 19px;
border: 1px solid orangered;
}
@import './style/index.css';
**style/index.css:**
text {
color: fsdfa;
}
when run script npm run build:
Below are error message:
**My solution:**
function loadModule(filename) {
+ let splits = filename.split("!");
+ let stringRequest = undefined;
+ if (splits[1]) {
+ const cssLoaderPath = loaderContext.remainingRequest.split('!')[0];
+ if (cssLoaderPath) {
+ stringRequest = stringifyRequest(loaderContext, cssLoaderPath);
}
+ const splittedPart = splits[1].match(/^(.*?)(\?.*)/);
+ singlePath = splittedPart ? splittedPart[1] : splits[1];
+ let filePath = path.join(loaderContext.context, singlePath);
+ if (!fs.existsSync(filePath) && singlePath !== stringRequest) {
+ splits[1] = JSON.parse(stringRequest);
}
}
+ filename = splits.join("!");
return new Promise((resolve, reject) => {
loaderContext.loadModule(filename, (error, src) => {
if (error) {
reject(error);
} else {
resolve(src);
}
});
});
}
I found 'stringifyRequest' is not corret, shoud fix it base on current loaderContext.