Question

我正在尝试使用webpack构建我的react-redux项目。我有以下行来处理较少的文件：

{
    test: /\.less$/, 
    include: /(stylesheets)/, 
    loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader!less-loader?sourceMap') 
}

出于某种原因，我收到以下错误消息：

ModuleParseError: Module parse failed: C:\path\to\project\client\stylesheets\app.less Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '@' (1:0)

知道为什么会这样吗？

*我在Windows 7上运行

Answer 1

根据'less-loader'documentation，您的网络包应该如下...

相应修改您的webpack配置文件...

var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    ...
    // must be 'source-map' or 'inline-source-map'
    devtool: 'source-map',
    module: {
        loaders: [
            {
                test: /\.less$/,
                loader: ExtractTextPlugin.extract(
                    // activate source maps via loader query
                    'css?sourceMap!' +
                    'less?sourceMap'
                )
            }
        ]
    },
    plugins: [
        // extract inline css into separate 'styles.css'
        new ExtractTextPlugin('styles.css')
    ]
};

Answer 2

问题出在include路径上，因为脚本在Windows上运行。需要在include字段中给出完整路径：

{
    test: /\.less$/, 
    include: path.join(__dirname, 'stylesheets'), 
    loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader!less-loader?sourceMap') 
}

webpack less-loader无法正常工作

2 个答案: