Skip to content

import absolute path files failed when use css modules #620

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
silaike opened this issue Oct 9, 2017 · 2 comments
Closed

import absolute path files failed when use css modules #620

silaike opened this issue Oct 9, 2017 · 2 comments

Comments

@silaike
Copy link

silaike commented Oct 9, 2017

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

@silaike silaike changed the title import absolute files failed when use css modules import absolute path files failed when use css modules Oct 10, 2017
@alexander-akait
Copy link
Member

@silaike problem still exists? Can you create minimum reproducible test repo?

@alexander-akait
Copy link
Member

Close in favor #589

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants