Skip to content

import absolute path files failed when use css modules #620

Closed
@silaike

Description

@silaike

Do you want to request a feature or report a bug?
bug.

What is the current behavior?
import absolute path files failed when use css modules.
Module not found: Error: Can't resolve '~img/logo.png'

If the current behavior is a bug, please provide the steps to reproduce.

project
│   webpack.config.json
│ 
└───src
     │
     └───img
     │    │
     │    │   logo.png
     │      
     └───components
     │    │
     │    └───Home
     │    │    index.js
     │    │    Home.scss
// webpack.config.json
const path = require( 'path' );
const webpack = require( 'webpack' );
const jsSrcPath = __dirname + '/src';
const excludePath = /node_modules/;
const jsSrcAbsPath = path.resolve( jsSrcPath );

module.exports = function () {
	return {
		context: jsSrcPath,
		module: {
			rules: [
				{
					test: /\.js$/,
					include: [ jsSrcAbsPath ],
					use: [
						{
							loader: 'babel-loader'
						}
					]
				},
				{
					test: /\.scss$/,
					exclude: excludePath,
					use: [
						{
							loader: 'style-loader'
						},
						{
							loader: 'css-loader',
							options: {
								modules: true,
								importLoaders: 2,
								localIdentName: "[name]__[local]__[hash:base64:5]"
							}
						},
						{
							loader: 'postcss-loader',
							options: {
								ident: 'postcss',
								plugins: () => [ require( 'autoprefixer' ) ]
							}
						},
						{
							loader: 'sass-loader'
						}
					]
				},
				{
					test: /\.(png|jpg|gif)$/,
					exclude: excludePath,
					use: [
						{
							loader: 'file-loader',
							options: {
								name: 'img/[name].[hash:8].[ext]',
							}
						}
					]
				}]
		},
		plugins: [
			new webpack.NoEmitOnErrorsPlugin()
		],
		resolve: {
			modules: [
				jsSrcPath,
				excludePath.source,
			],
			extensions: [ '.js', '.scss', '.css' ]
		}
	};
}
// components/Home/index.js
import styles from './Home.scss'
// components/Home/Home.scss
.test{ background-image: url(~img/logo.png);  }

What is the expected behavior?
it works fine without css modules mode.

Please mention other relevant information such as your webpack version, Node.js version and Operating System.
webpack version: v.3.2.0
css-loader version: 0.28.7

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions