先说一下问题。
在我的项目中的样式文件想要使用webpack的alias来引入图片等资源
但是总是解析不到,解析目录非常奇怪,就算不用alias也一直在变,导致我不管怎么调整都解析不到这个文件。
真是气死我了,搞了好久,一度放弃less使用css。说来奇怪,css就可以解析到。
乱七八糟的包下了一堆也没能解决问题。
早上头铁又搞了一早上,调整create-react-app的loader引入顺序还是不行,就在我想要再次放弃的时候,我突然发现有一个奇怪的包。
resolve-url-loader。没错就是这个傻逼的包,是webpack官网上没有的,于是它显得十分突兀。
我直接把他注释了,特么的。可以了。
附上修改后的geteStyleLoaders,其实没做什么,修改了postcss的加载顺序放在less后面,注释了resolve-url-loader。
但是,我这么做应该在只用Css的时候就不会去解析postcss-loader了,不过问题不大,懒得优化,反正也不打算用回css。
在此记录一下,以防下次想用回css的时候又出现奇怪的bug。
```javascript
const getStyleLoaders = (cssOptions, preProcessor) => {
const loaders = [
isEnvDevelopment && require.resolve('style-loader'),
isEnvProduction && {
loader: MiniCssExtractPlugin.loader,
// css is located in `static/css`, use '../../' to locate index.html folder
// in production `paths.publicUrlOrPath` can be a relative path
options: paths.publicUrlOrPath.startsWith('.')
? { publicPath: '../../' }
: {},
},
{
loader: require.resolve('css-loader'),
options: cssOptions,
}
].filter(Boolean);
if (preProcessor) {
const isLessOptions =
(preProcessor === 'less-loader')
? {
lessOptions: {
modifyVars: {
},
javascriptEnabled: true,
},
sourceMap: true
} : {
sourceMap: true
}
loaders.push(
// {
// loader: require.resolve('resolve-url-loader'),
// options: {
// sourceMap: isEnvProduction && shouldUseSourceMap,
// },
// },
{
loader: require.resolve(preProcessor),
options: isLessOptions,
},
{
// Options for PostCSS as we reference these options twice
// Adds vendor prefixing based on your specified browser support in
// package.json
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebook/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
}),
// Adds PostCSS Normalize as the reset css with default options,
// so that it honors browserslist config in package.json
// which in turn let's users customize the target behavior as per their needs.
postcssNormalize(),
],
syntax:require('postcss-less'),
sourceMap: isEnvProduction && shouldUseSourceMap,
},
},
);
}
return loaders;
};
```