Question

我已经关注了许多不同来源的示例（包括较少的加载器使用示例），但我仍然遇到麻烦导入bootstrap较少的代码，我可以优雅地自定义它的变量。

这是我的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，然后在那里导入bootstrap样式，如：

@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

我应该提一下，我可以导入我自己的风格。无论如何......

无论如何，此代码的存储库非常简单且可用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"
    }
};

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

在webpack中导入较少的bootstrap

1 个答案: