적은 양의 모듈을 webpack에서 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 

는 명확히하기 위해 :이 파일은 이미 툴툴 거리는 소리와 함께 일하게 입증했다. 웹팩 마이그레이션으로 인해 이러한 오류가 발생했습니다. here의 webpack 구성 예제를 사용하고 있습니다. 내 설정 파일 :

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로 컴파일 및 공공 (빌드) 폴더에 포함 된 것을 볼 수 있습니다. 구성 파일이 의도 한대로 실행되면 오류가 발생하는 이유는 무엇입니까?

여기 그것은 또한 모든 파일뿐만 아니라 브라우저에서 응용 프로그램에 포함되어 있는지 보여줍니다. 내 모든 종속성을 검사하고 모두 최신 버전을 실행하고 있습니다.

Answer 1

덜 파일의 수입에 대한 경로가 잘못되었습니다에 import (font_awesome 대신 Font_awesome)을 변경하려고합니다. 다음은 작업 참조입니다.

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

Answer 2

문제는 font_awesome 경로에 있다고 생각합니다.

는

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