配置CSS/LESS用的WebPack

文件，我想编译LESS文件到正常的CSS然后将其添加到/build文件夹，但我得到了一个错误：配置CSS/LESS用的WebPack

(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？

来源

2016-11-12 Charisse

由于您导入的文件较少，webpack无法解释它，因此失败。

总之你不需要这一点：

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

要回答你的问题关于字符串语法VS数组没有太大的差别可以忽略-loader位一起的WebPack很聪明，可以为你添加。

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

来源

2016-11-12 14:47:02 Moshie

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

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

来源

2016-11-12 16:55:28 Moshie

配置CSS/LESS用的WebPack

回答

相关问题