Error with @import when using extract-text-webpack-plugin

Question

Folder structure:

/resources
  /assets
    /css
      /config.less
    /js
      /index.js
      /components
        /Test
          /Presentation.jsx
          /styles.less

In config.less I would like to store some variables. In Test/styles.less I need to include config.less:

@import 'config.less';

Compiler returns this error:

@import 'config.less';
^
Can't resolve './config.less'

(Note: it tries to load ./config.less instead of config.less)

This include works:

@import '../../../css/config.less';

But it is very inconvenient. Here is my webpack config:

module.exports = {
    output: {
        filename: 'bundle.js',
        publicPath: '/'
    },
    module: {
        loaders: [
            {
                test: /\.(js|jsx)$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: [
                        ['react'],
                        ['es2015'],
                        ['stage-0']
                    ],
                    plugins: [
                        ['transform-decorators-legacy'],
                        ['transform-runtime'],
                        ['transform-react-remove-prop-types'],
                        ['transform-react-constant-elements'],
                        ['transform-react-inline-elements']
                    ]
                }
            },
            {
                test: /\.less$/,
                loader: extractTextPlugin.extract({
                    publicPath: '../public',
                    use: [
                        {
                            loader: 'css-loader'
                        },
                        {
                            loader: 'less-loader',
                            options: {
                                plugins: [
                                    new lessPluginLists()
                                ]
                            }
                        }
                    ]
                }),
            }
        ],
    },
    plugins: [
        new webpack.NoEmitOnErrorsPlugin(),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': '"production"'
        }),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': '"development"'
        }),
        new webpack.ProvidePlugin({
            'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch'
        }),
        new webpack.optimize.UglifyJsPlugin({
            beautify: false,
            comments: false,
            sourceMap: true,
            compress: {
                sequences: true,
                booleans: true,
                loops: true,
                unused: true,
                warnings: false,
                drop_console: true,
                unsafe: true
            }
        }),
        new extractTextPlugin({
            filename: 'bundle.css',
            allChunks: true
        }),
        new optimizeCssAssetsPlugin({
            assetNameRegExp: /\.css$/g,
            cssProcessor: require('cssnano'),
            cssProcessorOptions: {
                discardComments: {
                    removeAll: true
                }
            },
            canPrint: true
        })
    ],
    resolve: {
        modules: [
            './node_modules',
            path.resolve(__dirname, 'resources/assets/js'),
            path.resolve(__dirname, 'resources/assets/css')
        ],
        extensions: ['.less', '.css', '.js']
    }
};

It seems that resolve.modules configuration doesn't work in such situation. (I also tried to use resolveLoader settings for webpack)

Answer 1

Solved. Just add prefix ~:

@import '~config.less'