Question

我想将LESS文件编译成普通的CSS，然后将其添加到/build文件夹中，但是我收到错误：

(function (exports, require, module, __filename, __dirname) { body {
                                                               ^
SyntaxError: Unexpected token {
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:528:28)
    at Object.Module._extensions..js (module.js:565:10)
    at Module.load (module.js:473:32)
    at tryModuleLoad (module.js:432:12)
    at Function.Module._load (module.js:424:3)
    at Module.require (module.js:483:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/charisse/react/wanderlust/webpack.config.js:3:12)
    at Module._compile (module.js:556:32)
    at Object.Module._extensions..js (module.js:565:10)
    at Module.load (module.js:473:32)
    at tryModuleLoad (module.js:432:12)
    at Function.Module._load (module.js:424:3)
    at Module.require (module.js:483:17)
    at require (internal/module.js:20:19)

我理解错误来自LESS文件，但我不知道如何解决它？

body {
    background: yellow;
}

我已经按照教程进行操作，而webpack.config.js似乎也是以相同的方式构建的：

var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var Less = require('./app/css/styles.less');

var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
    template: './app/index.html',
    inject: 'body'
});

var ExtractTextPluginConfig = new ExtractTextPlugin('./build/styles.css');

module.exports = {
    entry: './app/js/index.js',
    output: {
        path: __dirname + '/build',
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {   test: /\.less$/,
                exclude: /(node_modules)/,
                loader: ExtractTextPlugin.extract('style-loader', 'css-loader!autoprefixer!less-loader')
            }
        ]
    },
    plugins: [ HtmlWebpackPluginConfig, ExtractTextPluginConfig]
}

在'style-loader', 'css-loader'和style-loader!css-loader之间实施的加载器之间是否存在任何差异？

是否也可以将已编译的LESS文件注入index.html文件夹内的/build？

Answer 1

因为您要导入较少的文件，所以webpack无法解释它，因此失败。

简而言之，你不需要这一点：

var Less = require('./app/css/styles.less');

要回答关于字符串语法与数组的问题，没有太大的区别，你可以省略-loader位，所有webpack足够聪明，可以为你添加。

你提到的第二个问题，你已经在使用html-webpack-plugin了。

Answer 2

在index.js（条目文件）中，您需要使用较少的文件，以便它可以像这样运行加载器

var css = require('../css/styles.less');

我冒昧地重构你的webpack.config

var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
//var Less = require('./app/css/styles.less');

module.exports = {
    entry: './app/js/index.js',
    output: {
        path: __dirname + '/build',
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {   test: /\.less$/,
                exclude: /node_modules/,
                loader: ExtractTextPlugin.extract('style', 'css!less')
            }
        ]
    },
    plugins: [ 
        new HtmlWebpackPlugin({
            template: './app/index.html',
            inject: 'body'
        }), 
        new ExtractTextPlugin('./styles.css')
    ]
}

使用webpack配置CSS / LESS文件

2 个答案: