在 webpack 中导入较少的引导程序

Question

我遵循了许多不同来源的示例（包括 less-loader 使用示例），但我仍然无法以可以优雅地自定义变量的方式导入 bootstrapless 代码。

这是我的 webpack 配置：

webpackconfig.js

var path = require("path");

module.exports = {
  entry: "./app/index.js",
  output: {
    filename: "./dist/bundle.js",
    path: __dirname
  },
 module: {
  rules: [
      {
        test: /\.css$/,
        use: [
          { loader: "style-loader/url" },
          { loader: "file-loader" }
        ]
      },
      {
        test: /\.less$/,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" },
          { loader: "less-loader" }
        ]
      },
      { 
        test: /\.png$/, 
        use: [ { loader: "url-loader?limit=100000" } ]
      },
      { 
        test: /\.jpg$/, 
        use: [ { loader: "file-loader" } ] 
      },
      {
        test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, 
        use: [ { loader: "url?limit=10000&mimetype=application/font-woff" } ]
      },
      {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, 
        use: [ { loader: "url?limit=10000&mimetype=application/octet-stream" } ]
      },
      {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, 
        use: [ { loader: "file" } ]
      },
      {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, 
        use: [ { loader: "url?limit=10000&mimetype=image/svg+xml" } ]
      },
      {
        test: /\.jsx?$/,
        use: [ { loader: "babel-loader" } ],
        exclude: /(node_modules|bower_components)/        
      }
    ]
},

node: {
  console: true,
  fs: "empty",
  net: "empty",
  tls: "empty"
}

};

现在为了进行导入，我尝试了两种不同的方法。通过少直接导入引导程序，例如：

import "bootstrap/less/bootstrap.less"

或者只导入我自己的less，然后在其中导入引导样式，例如：

@import '~bootstrap/less/bootstrap.less';

无论如何，这是我的 index.js：

index.js

import _ from 'lodash'
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import 'font-awesome/css/font-awesome.css'
import styles from  './style/style.less'


const app = document.getElementById("app")

ReactDOM.render(
    <App/>,
    app
)

在任何一种方法中，我都会收到以下错误：

Error: Module 'D:\code\ox\node_modules\url\url.js' is not a loader (must have normal or pitch function)
    at loadLoader

我应该提一下，我可以导入我自己的 style.less 就好了......

无论如何，此代码的存储库非常小而简单，可通过here 获取。

我知道这是一本好书……感谢您的帮助。

谢谢！

Answer 1

解决您的问题的方法是在您使用的所有加载器中使用 -loader 前缀。

更新后的 webpack.config.js 应该如下：-

var path = require("path");

module.exports = {
    entry: "./app/index.js",
    output: {
        filename: "./dist/bundle.js",
        path: __dirname
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: [
                { loader: "style-loader" },
                { loader: "file-loader" }
            ]
        }, {
            test: /\.less$/,
            use: [
                { loader: "style-loader" },
                { loader: "css-loader" },
                { loader: "less-loader" }
            ]
        }, {
            test: /\.png$/,
            use: [ { loader: "url-loader?limit=100000" } ]
        }, {
            test: /\.jpg$/,
            use: [ { loader: "file-loader" } ]
        }, {
            test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
            use: [ { loader: "url-loader?limit=10000&mimetype=application/font-woff" } ]
        }, {
            test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
            use: [ { loader: "url-loader?limit=10000&mimetype=application/octet-stream" } ]
        }, {
            test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
            use: [ { loader: "file-loader" } ]
        }, {
            test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
            use: [ { loader: "url-loader?limit=10000&mimetype=image/svg+xml" } ]
        }, {
            test: /\.jsx?$/,
            use: [ { loader: "babel-loader" } ],
            exclude: /(node_modules|bower_components)/
        }]
    },
    node: {
        console: true,
        fs: "empty",
        net: "empty",
        tls: "empty"
    }
};

我希望这能解决您的问题... :)