我正在使用webpack进行构建，并使用less-loader将更少的内容转换为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;
index.less
@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"
}
答案 0 :(得分：0)
您要导入的文件是.css文件。如果要将引导程序导入较少的文件，则需要指定它。
@import '~bootstrap/dist/css/bootstrap.css';
如果您想将其用作较小的文件（以便可以将其实用程序用作混合或函数），则需要指定它
@import (less) '~bootstrap/dist/css/bootstrap.css';
注意： 我遇到了一个问题，我无法成功执行此操作，因为运行webpack build时出现错误
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
如果找到解决方法，我会通知您