Skip to content
This repository was archived by the owner on Jul 19, 2022. It is now read-only.

failed to resolve id #1

@mr-scrpt

Description

@mr-scrpt

Hi. I use CRA with eject, here is my webpack settings file:

const resolver = require('postcss-import-alias-resolver');
….
{
	// 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-import')({
					resolve: resolver({
						alias: {
							/* lb: path.resolve('./src/lib'), */
							'@': path.resolve('./src'),
							lb: path.resolve('./src/lib')
						},
						extensions: [ '.css' ],
						/* modules: [ 'assets/libs', 'node_modules' ], */

						dontPrefix: false, // do not enforce '~' prefix to aliases

						/* 	webpackConfig: require('./webpack.conf.js'), */
						mergeAlias: 'extend',
						mergeModules: 'extend',
						mergeExtensions: 'replace',

						onResolve(id, base, resolvedPath) {
							console.log(`id ${id} resolved to ${resolvedPath}`);
							// if you want to override then return new path
							/* if (override === true) return 'some/new/path'; */
						},
						onFail(id, base) {
							console.log(`failed to resolve id ${id} from ${base}`);
							// if you want to override then return new path
							/* 	if (override === true) return 'some/new/path'; */
						}
					})
				}),
				require('postcss-custom-properties')({
					preserve: false,
					importFrom: './src/lib/var/variables.css'
				}),
				require('postcss-flexbugs-fixes'),
				require('postcss-preset-env')({
					autoprefixer: {
						flexbox: 'no-2009'
					},
					stage: 0
				}),
				// 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(),

				require('postcss-conditionals'),
				require('postcss-mixins'),
				require('postcss-simple-vars'),
				require('postcss-color-function'),
				require('postcss-nested')
				],
				sourceMap: isEnvProduction && shouldUseSourceMap
		}
}

Here is my import in css file
@import "~lb/lib/lib.css";
But in the console, I get an error when resolve (last line)

id ../../lib/lib.css resolved to H:\courses\react-hooks-self-update\src\lib\lib.css
id ./grid/post-grid.css resolved to H:\courses\react-hooks-self-update\src\lib\grid\post-grid.css
failed to resolve id ~lb/lib/lib.css from H:\courses\react-hooks-self-update\src\components\menuAdaptive

And

Error: ENOENT: no such file or directory, stat 'H:\courses\react-hooks-self-update\src\components\menuAdaptive\~lb\lib\lib.css'

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions