./node_modules/bootstrap-loader/no-op.js 中的错误 [英] ERROR in ./node_modules/bootstrap-loader/no-op.js

问题描述

我在我的应用程序中使用 Webpack，我在其中创建我的入口点index.ts 并且我正在尝试使用 sass css bootstrap typescript 作为我项目 webpack 中的资源来运行它，但是我遇到了这些错误，(bootstrap-loader):

I'm using Webpack in my application, in which I create my entry point as index.ts and I'm trying to run it using sass css bootstrap typescript as resources in my project webpack, but I am stuck with these errors,(bootstrap-loader) :

./node_modules/bootstrap-loader/no-op.js 中的错误(./node_modules/bootstrap-loader/lib/bootstrap.scripts.loader.js?{"bootstrapVersion":3,"useCustomIconFontPath":false,"extractStyles":false,"styleLoaders":["style-loader","css-loader","sass-loader"],"styles":["mixins","normalize","print","glyphicons","s脚手架"、类型"、代码"、网格"、表格"、表单"、按钮"、组件动画"、下拉菜单"、按钮组"、输入组"、导航"、导航栏"、面包屑"、分页"、寻呼机"、标签"、徽章"、超大屏幕"、缩略图"、警报"、进度条"、媒体"、列表组"，面板"，井"，响应嵌入"，关闭"，模态"，工具提示"，弹出框"，轮播"，实用程序"，响应实用程序"]，脚本":[过渡"，警报"，按钮"，轮播"，折叠"，下拉"，模态"，工具提示"，弹出窗口"，滚动"，标签"，词缀"],"configFilePath":"/projects/bootstrapwebpack/node_modules/bootstrap-loader/.bootstrap-3-default","bootstrapPath":"/projects/bootstrapwebpack/node_modules/bootstrap-sass","bootstrapRelPath":"../bootstrap-sass"}!./node_modules/bootstrap-loader/no-op.js)...

ERROR in ./node_modules/bootstrap-loader/no-op.js (./node_modules/bootstrap-loader/lib/bootstrap.scripts.loader.js?{"bootstrapVersion":3,"useCustomIconFontPath":false,"extractStyles":false,"styleLoaders":["style-loader","css-loader","sass-loader"],"styles":["mixins","normalize","print","glyphicons","s caffolding","type","code","grid","tables","forms","buttons","component-animations","dropdowns","button-groups","input-groups","navs","navbar","breadcrumbs","pagination","pager","labels","badges","jumbotron","thumbnails","alerts","progress-bars","media","list-group","panels","wells","responsive-embed","close","modals","tooltip","popovers","carousel","utilities","responsive-utilities"],"scripts":["transition","alert","button","carousel","collapse","dropdown","modal","tooltip","popover","scrollspy","tab","affix"],"configFilePath":"/projects/bootstrapwebpack/node_modules/bootstrap-loader/.bootstraprc-3-default","bootstrapPath":"/projects/bootstrapwebpack/node_modules/bootstrap-sass","bootstrapRelPath":"../bootstrap-sass"}!./node_modules/bootstrap-loader/no-op.js) ...

在我的 config.js 中:

const path = require('path');
const webpack = require('webpack');
module.exports = {
entry:  [ 'bootstrap-loader', './src/index.ts',],
module: {
  rules:[
    {
      test: /\.css$/,
       use: [
        'style-loader',
        'css-loader'
            ],
    },
    {
      test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
            loader: 'babel-loader',
            options: {
              presets: ['env']
              }
            }
      },
      {
        test: /\.(gif|png|jpe?g|svg)$/i,
        use: [
         'file-loader',
          {
            loader: 'image-webpack-loader',
            options: {
            },
          },
        ],
      },
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
        exclude: /node_modules/
      },
      // Boooootstrap
      { 
        test: /bootstrap-sass\/assets\/javascripts\//, 
        loader: 'imports-loader?jQuery=jquery' 
      },
      { 
        test: /\.(woff2?|svg)$/, loader: 'url-loader?limit=10000' 
      },
      { 
        test: /\.(ttf|eot)$/, loader: 'file-loader' 
      },
    ],
    }, 
output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
    }
};

目前我正在尝试在我的 package.json 中使用以下几行:

{
  "name": "test",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "dev": "webpack --mode development --watch ",
    "build": "webpack --progress -p --watch "
  },
  "dependencies": {
    "autoprefixer": "^9.0.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "bootstrap": "^4.1.2",
    "bootstrap-loader": "^3.0.0",
    "bootstrap-sass": "^3.3.7",
    "css-loader": "^1.0.0",
    "exports-loader": "^0.7.0",
    "file-loader": "^1.1.11",
    "image-webpack-loader": "^4.3.1",
    "jquery": "^3.3.1",
    "mini-css-extract-plugin": "^0.4.1",
    "node-sass": "^4.9.2",
    "popper.js": "^1.14.3",
    "postcss-loader": "^2.1.6",
    "resolve-url-loader": "^2.3.0",
    "sass-loader": "^7.0.3",
    "style-loader": "^0.21.0",
    "ts-loader": "^4.4.2",
    "typescript": "^2.9.2",
    "url-loader": "^1.0.1",
    "webpack": "^4.16.0",
    "webpack-cli": "^3.0.8"
  }
}

推荐答案

我昨天遇到了同样的问题.尝试添加 ./src/index.ts

I had the same problem yesterday. Try adding in ./src/index.ts

   require 'bootstrap/dist/css/bootstrap.min.css';
   require 'bootstrap/dist/js/bootstrap.min.js';

这篇关于./node_modules/bootstrap-loader/no-op.js 中的错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！