使用 webpack 配置 CSS/LESS 文件答案

【问题标题】：Configuring CSS/LESS files with webpack使用 webpack 配置 CSS/LESS 文件
【发布时间】：2017-03-26 14:06:12
【问题描述】：

我想将 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 文件注入到位于 /build 文件夹中的 index.html 中？

【问题讨论】：

标签： html css webpack

【解决方案1】：

在您的 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')
    ]
}

【讨论】：

【解决方案2】：

因为你正在导入less文件，webpack无法解释它所以它失败了。

总之你不需要这个位：

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

要回答你关于字符串语法和数组的问题，你可以省略 -loader 位，webpack 足够聪明，可以为你添加它。

您问的第二个问题，您已经在使用 html-webpack-plugin。

【讨论】：

谢谢！我设法使它工作。我现在遇到的问题是，当我运行webpack -p 时，/build 文件夹确实使用index.html 和bundle.js 构建，但 LESS 文件尚未转换？