Меньше сборки модуля не удалось в веб-пакете после миграции из grunt

Question

Я не могу понять, как скомпилировать мои меньше файлов в css, а затем включить их в мою папку сборки, при этом приложение не запускается. Попытка построить / запустить приложение возвращает следующую ошибку:

ERROR in ./content/styles/less/ts.less
Module build failed: 

@import "node_modules/bootstrap/less/mixins/buttons.less";
@import "node_modules/Font-awesome/less/font-awesome.less";
^
Can't resolve './node_modules/Font-awesome/less/font-awesome.less' in '/home/thinkpad/work/EPD.SPA/EpdSPA/content/styles/less'
      in /home/thinkpad/work/EPD.SPA/EpdSPA/content/styles/less/ts.less (line 4, column 0)
 @ multi ./content/styles/less/for.less ./content/styles/less/kladd.less ./content/styles/less/ts.less

Для пояснения: эти файлы уже доказали, что работают с grunt. Миграция веб-пакетов вызвала эти ошибки. Я использую примеры конфигурации веб-пакетов здесь. Мой конфигурационный файл:

var webpack = require('webpack');
var globby = require('globby');
var path = require('path');

var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var AssetsPlugin = require('assets-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');

const extractLESS = new ExtractTextPlugin('stylesheets/[name]-two.css');
module.exports = {
    entry: {
        app: globby.sync(['./app/app.js','./app/app.run.js', './app/app.config.js', './app/**/*.js']),
        styles: globby.sync(['./content/styles/*.css']),
        lessStyles: globby.sync(['./content/styles/less/*.less']), 
        images: globby.sync(['./content/images/**/*.*']),
        vendor: [
            // removed to save space
        ]
    },
    output: {
        filename: './scripts/[name].bundle.js',
        path: path.join(__dirname, "public")
    },
    devServer: {
        port: 1384,
        contentBase: './public/'
    },

    // Enable sourcemaps for debugging webpack's output.
    devtool: 'source-map',

    module: {
        rules: [
            {    test: /\.less$/,
                 use: extractLESS.extract([ 'css-loader', 'less-loader' ])
            },
            {
                test: /\.html$/,
                loader: 'raw-loader',
                exclude: [/node_modules/]
            },
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' }),
            },
            {
                test: /\.(ico)$/,
                loader: "url-loader?name=./[name].[ext]",
                include: path.resolve(__dirname, "content", "images")
            },
            {
                test: /\.svg$/,
                loader: 'svg-loader'
            },
            {
                test: /\.(jpg|jpeg|gif|png|PNG|tiff|svg)$/,
                loader: 'file-loader?name=/[path]/[name].[ext]',
                include: path.resolve(__dirname, "content", "images"),
            },
            {
                test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: 'url-loader?minetype=application/font-woff&name=./fonts/[name].[ext]'
            },
            {
                test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: 'file-loader?name=./fonts/[name].[ext]'
            },
            {
                test: require.resolve('adal-angular/lib/adal'),
                loader: 'expose-loader?AuthenticationContext'
            },
            {
                test: /\.js$/,
                enforce: "pre",
                loader: 'source-map-loader'
            }
        ],
    },

    plugins: [
        new HtmlWebpackPlugin({
            template: './app/layout.html',
            filename: 'index.html'
        }),
        new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: './scripts/vendor.bundle.js' }),
        new ExtractTextPlugin({ filename: './[name].bundle.css' }),
        /*
        new CleanWebpackPlugin(['./public'], {
            verbose: false
        }),
        */
        new AssetsPlugin({
            filename: 'webpack.assets.json',
            path: './public/scripts',
            prettyPrint: true
        }),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
            'window.$': 'jquery',
            "window.AuthenticationContext": "AuthenticationContext",
            _: 'underscore'
        }),

        new CopyWebpackPlugin([
            {from: './app/**/*.html', to: './'}
        ]),
        extractLESS // including the less files here
    ],
    externals: [
        { xmlhttprequest: '{XMLHttpRequest:XMLHttpRequest}' }
    ]

}

Здесь вы можете видеть, что меньше файлов были скомпилированы в css и включены в публичную (build) папку. Почему я получаю ошибки, если файл конфигурации выполняется так, как задумано?

Здесь также показано, что все файлы включены в приложение в браузере. Я проверил все мои зависимости, и все они работают под управлением последних версий.

Answer 1

Путь для импорта в меньшем количестве файлов был неверным. Вот рабочие ссылки:

@import "~bootstrap/less/variables.less";
@import "~bootstrap/less/mixins/buttons.less";
@import "~font-awesome/less/font-awesome.less";

Answer 2

Я думаю, что проблема с вашим font_awesome дорожка.

Попробуй поменять import to (font_awesome вместо Font_awesome)

 @import "node_modules/font-awesome/less/font-awesome.less";