使用 @import使用提取物 - text-webpack-plugin时的错误

Question

文件夹结构：

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

在config.less中，我想存储一些变量。在Test/styles.less中，我需要包括config.less：

@import 'config.less';

编译器返回此错误：

@Import'config.less';
^
无法解决'./config.less'

（注意：它试图加载./config.less而不是config.less）

这包括工作：

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

，但这很不方便。这是我的webpack配置：

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']
    }
};

似乎resolve.modules配置在这种情况下不起作用。（我还尝试将webpack的resolveloader设置使用）

Answer 1

已解决。只需添加前缀~：

@import '~config.less'