使用 extract-text-webpack-plugin 时 @import 出错答案

【问题标题】：Error with @import when using extract-text-webpack-plugin使用 extract-text-webpack-plugin 时 @import 出错
【发布时间】：2017-10-02 10:30:28
【问题描述】：

文件夹结构：

/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 设置）

【问题讨论】：

标签： css webpack less extracttextwebpackplugin

【解决方案1】：

解决了。只需添加前缀~:

@import '~config.less'

【讨论】：