如何将 bootstrap-material-design 包添加到 webpack 中?
How can I add the bootstrap-material-design package into webpack?
我尝试使用基于 Sass 的 bootstrap-loader 添加 bootstrap-material-webpack 设计,但没有结果。
我可以使用 bower-webpack 插件加载它,但我想使用 npm 对其进行更多控制,而无需管理 bower 包。
尝试以下步骤。
安装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')
是的,你应该这样做,正如@jkukul 所说:
Install bootstrap-material-design:
npm install --save bootstrap-material-design
Add css loader to your webpack config:
module.exports = {
module: {
loaders: [
{ test: /\.css$/, loader: "style-loader!css-loader" },
]
},
};
另外,你应该安装 style-loader 和 css-loader packages
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');
并在 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']
}
}
};
我尝试使用基于 Sass 的 bootstrap-loader 添加 bootstrap-material-webpack 设计,但没有结果。
我可以使用 bower-webpack 插件加载它,但我想使用 npm 对其进行更多控制,而无需管理 bower 包。
尝试以下步骤。
安装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')
是的,你应该这样做,正如@jkukul 所说:
Install bootstrap-material-design:
npm install --save bootstrap-material-design
Add css loader to your webpack config:module.exports = { module: { loaders: [ { test: /\.css$/, loader: "style-loader!css-loader" }, ] }, };
另外,你应该安装 style-loader 和 css-loader packages
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');
并在 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']
}
}
};