Closed
Description
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