我正在尝试使用基于Sass的bootstrap-loader和webpack添加bootstrap-material-design,但没有结果。
我可以使用bower-webpack插件加载它,但我想使用npm更好地控制它,而不需要管理bower包。
我正在尝试使用基于Sass的bootstrap-loader和webpack添加bootstrap-material-design,但没有结果。
我可以使用bower-webpack插件加载它,但我想使用npm更好地控制它,而不需要管理bower包。
bootstrap-material-design
:npm install --save bootstrap-material-design
module.exports = {
module: {
loaders: [
{ test: /\.css$/, loader: "style-loader!css-loader" },
]
},
};
require('bootstrap-material-design/dist/css/bootstrap-material-design.css')
是的,正如@jkukul所说:
安装bootstrap-material-design:
npm install --save bootstrap-material-design
将css加载器添加到您的webpack配置中:module.exports = { module: { loaders: [ { test: /\.css$/, loader: "style-loader!css-loader" }, ] }, };
此外,您还应该安装style-loader和css-loader软件包。
npm install style-loader css-loader --save-dev
并添加提取文本的webpack插件:
npm i extract-text-webpack-plugin --save
var ExtractTextPlugin = require ('extract-text-webpack-plugin');
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配置文件(希望它能有所帮助!):
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']
}
}
};