如何將bootstrap-material-design軟件包添加到webpack中？

Question

我試圖用webpack添加bootstrap-material-design，同時使用基於Sass的bootstrap-loader，但沒有結果。

我可以使用bower-webpack插件加載它，但是我希望在沒有管理涼亭包的情況下使用npm對它進行更多的控制。

Answer 1

是的，你應該做的，因爲@jkukul說：

安裝引導材料設計： npm install --save bootstrap-material-design 添加CSS加載到你的WebPack配置： module.exports = { module: { loaders: [ { test: /\.css$/, loader: "style-loader!css-loader" }, ] }, };

也，你應該安裝風格裝載機和CSS-裝載機包

npm install style-loader css-loader --save-dev 

並添加提取文本webpack插件：

npm i extract-text-webpack-plugin --save 

module.exports前加入這一行：

var ExtractTextPlugin = require ('extract-text-webpack-plugin'); 

，並添加這個PARAM 內module.exports：

styleLoader: require('extract-text-webpack-plugin').extract('style-loader', 'css-loader!postcss-loader!less-loader') 

可能，它會出現jQuery的未定義錯誤： 我是這樣修好的

npm i jquery --save 

，並添加插件裏面module.exports：（！希望這將是有益的）

plugins: [ 
    new webpack.ProvidePlugin({ 
    $: "jquery", 
    jQuery: "jquery" 
})] 

這裏是我的總webpack.config文件：

var path = require('path'); 
 
var webpack = require('webpack'); 
 
var ExtractTextPlugin = require ('extract-text-webpack-plugin'); 
 

 
module.exports = { 
 
    styleLoader: require('extract-text-webpack-plugin').extract('style-loader', 'css-loader!postcss-loader!less-loader'), 
 
    devtool: 'eval', 
 
    entry: [ 
 
    'webpack-dev-server/client?http://localhost:3000', 
 
    'webpack/hot/only-dev-server', 
 
    './src/index' 
 
    ], 
 
    output: { 
 
    path: path.join(__dirname, 'dist'), 
 
    filename: 'bundle.js', 
 
    publicPath: '/static/' 
 
    }, 
 

 
    plugins: [ 
 
    new webpack.HotModuleReplacementPlugin(), 
 
    new webpack.ProvidePlugin({ 
 
     $: "jquery", 
 
     jQuery: "jquery" 
 
    }) 
 

 
    ], 
 
    module: { 
 
    loaders: [{ 
 
     test: /\.js$/, 
 
     loaders: ['react-hot', 'babel'], 
 
     include: path.join(__dirname, 'src') 
 
    }, 
 
    { 
 
     test: /\.css$/, 
 
     loader: "style-loader!css-loader" 
 
    } 
 

 
    ], 
 
    resolve: { 
 
    extensions: ['', '.js', '.jsx','.css'], 
 
    modulesDirectories: ['node_modules'] 
 
    } 
 
    } 
 
};

Answer 2

請嘗試以下步驟。

安裝bootstrap-material-design：

npm install --save bootstrap-material-design 

添加CSS加載到你的WebPack配置：

module.exports = { 
module: { 
    loaders: [ 
     { test: /\.css$/, loader: "style-loader!css-loader" }, 
    ] 
    }, 
}; 

在你的WebPack的入口文件中加入：

require('bootstrap-material-design/dist/css/bootstrap-material-design.css')