Javascript 将webpack与引导和较少的加载程序集成

我使用webpack进行构建，使用less loader将less转换为css。在其中一个较少的文件中，我希望像这样导入引导

@import "~bootstrap/less/bootstrap";

但它无法解析节点引导文件的路径。我在这里错过了什么

错误：

Can't resolve 'bootstrap/less/bootstrap.less' in '/Users/abc/workspace/codebase/hybris/bin/custom/some/somestorefront/web/webroot/WEB-INF/_ui-src/less/pages'
      in /Users/abc/workspace/codebase/hybris/bin/custom/some/somestorefront/web/webroot/WEB-INF/_ui-src/less/pages/account-dashboard-page.less 

webpack.common.js

const path = require('path');
var CommonsChunkPlugin = require(
    "./node_modules/webpack/lib/optimize/CommonsChunkPlugin");
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: {
    'styles': ['./web/webroot/WEB-INF/_ui-src/less/index.less'],
    'index': ['babel-polyfill', './web/webroot/WEB-INF/_ui-src/js/index.js']
  },

  //Include sourcemap for debugging
  devtool: 'source-map',
  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, 'web/webroot/_ui/dist')
  },
  plugins: [
    //Used to extract common CSS in a css file.
    new ExtractTextPlugin('styles.css'),

    //Extract Common JS into a single file
    new CommonsChunkPlugin({
      name: "common-libs",
      filename: "common-libs.js",
      minChunks: 2,
    })
  ],
  module: {
    rules: [
      //Use Babel to transpile JS to proper version of ES.
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['babel-preset-es2015-ie']
          }
        }
      },
      //Use ESLint to enforce JS code quality see .eslintrc.json for rules.
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "eslint-loader"
      },
      //Use ExtractTextPlugin to extract common CSS into a CSS file.
      {
        test: /index\.less/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: ["css-loader", "less-loader"]
        })
      },
      //Use URL-loader to include Fonts in the final package
      {
        test: /\.(otf|ttf|eot|woff|woff2|svg|png)$/,
        use: {
          loader: "url-loader",
          options: {
            name: "./_ui/dist/js/[hash].[ext]",
          },
        },
      }
    ]
  }
};

index.js

import $ from 'jquery';
import {PictureFill} from 'picturefill';
import {TextareaComponent} from './components/textarea-component';
import {NumberInputComponent} from './components/number-input-component';
import {DataAnimation} from './utils/data-animations';
import {AccordionComponent} from './components/accordion-component';
import {SelectComponent} from './components/select-component';
import {GlobalMessages} from './utils/global-messages';
import {CSRFFilter} from './utils/csrf-filter';
import {LiveChatComponent} from './components/live-chat-component';
import {TooltipComponent} from './cms/tooltip-component';
import {SpinnerInject} from './utils/spinner-inject';

window.picturefill = PictureFill;
window.$ = $;
window.jQuery = $;
window.TooltipComponent = TooltipComponent;

无索引

@import 'fonts';
@import 'icons';
@import 'variables';
@import 'common';
@import 'components/accordion';
@import 'components/modal';
@import 'components/pagination';
@import 'components/navbar';
@import 'components/buttons';
@import 'components/inputs';
@import 'components/tooltips';
@import 'components/global-messages';
@import 'components/simple-responsive-banner';
@import 'components/scroll-top';
@import 'components/live-chat';
@import 'components/carousel';

@import 'components/tiles';
@import 'pages/error-page';
@import 'components/footer';

//other less classes

package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "test",
  "main": "Gruntfile.js",
  "directories": {
    "lib": "lib"
  },
  "dependencies": {
    "@types/js-cookie": "^2.1.0",
    "@types/lodash.throttle": "^4.1.3",
    "@types/owl.carousel": "^2.2.1",
    "@types/picturefill": "^3.0.0",
    "babel-polyfill": "^6.26.0",
    "bootstrap": "^4.3.1",
    "font-awesome": "^4.7.0",
    "jquery": "^3.2.1",
    "js-cookie": "^2.2.0",
    "lodash.throttle": "^4.1.1",
    "owl.carousel": "^2.3.4",
    "picturefill": "^3.0.2",
    "popper.js": "^1.15.0",
    "reset-css": "^2.2.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015-ie": "^6.7.0",
    "css-loader": "^0.28.9",
    "eslint": "^4.17.0",
    "eslint-config-google": "^0.9.1",
    "eslint-loader": "^1.9.0",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-node": "^5.2.1",
    "eslint-plugin-promise": "^3.6.0",
    "eslint-plugin-standard": "^3.0.1",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.6",
    "less": "^2.7.3",
    "less-loader": "^4.0.5",
    "style-loader": "^0.19.1",
    "uglifyjs-webpack-plugin": "^1.1.6",
    "url-loader": "^0.6.2",
    "webpack": "^3.10.0",
    "webpack-livereload-plugin": "^1.0.0",
    "webpack-merge": "^4.1.2"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.common.js"
  },
  "author": "",
  "license": "ISC"
}

---

您正在导入的文件是一个.css文件。如果要将引导导入less文件，则需要指定它

@import '~bootstrap/dist/css/bootstrap.css';

如果您想将其用作一个较少的文件（这样您就可以将其实用程序用作mixin或函数），您需要指定它

@import (less) '~bootstrap/dist/css/bootstrap.css';

注: 有一个问题，我面临着这一点，我不能成功地做到这一点，因为一个错误时，运行网页生成

ERROR in XXXX (./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./source/views/pages/seo/index.less)
Module build failed (from ./node_modules/less-loader/dist/cjs.js):


  padding-right: calc(0.75em + 2.3125rem);
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") #fff no-repeat center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
^
Cannot read property 'denominator' of undefined

---

如果我找到了此问题的解决方案，我会通知您。您要导入的文件是.css文件。如果要将引导导入less文件，则需要指定它

@import '~bootstrap/dist/css/bootstrap.css';

如果您想将其用作一个较少的文件（这样您就可以将其实用程序用作mixin或函数），您需要指定它

@import (less) '~bootstrap/dist/css/bootstrap.css';

注: 有一个问题，我面临着这一点，我不能成功地做到这一点，因为一个错误时，运行网页生成

ERROR in XXXX (./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./source/views/pages/seo/index.less)
Module build failed (from ./node_modules/less-loader/dist/cjs.js):


  padding-right: calc(0.75em + 2.3125rem);
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") #fff no-repeat center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
^
Cannot read property 'denominator' of undefined

如果我找到了解决办法，我会告诉你的