如何配置 webpack 以运行 bootstrap 和 sass?
Posted
技术标签:
【中文标题】如何配置 webpack 以运行 bootstrap 和 sass?【英文标题】:How do I configure webpack to run bootstrap and sass? 【发布时间】:2016-06-03 05:00:51 【问题描述】:我不擅长 webpack。我还没有真正“学会它”,我有一个从我制作的 repo 中提取的模板/样板,它为我提供了一个在 React 中构建的环境。我正在努力将引导功能添加到我的项目中,因为我不擅长 webpack 并且不了解加载器等是如何工作的。有人可以帮帮我吗?也许是关于 webpack 加载器的简单解释? (学习它在我的清单上,但不是优先事项)。
我收到一些奇怪的错误,例如:
./~/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.woff2 中的错误
这是我的 webpack.config.js
var webpack = require('webpack');
var path = require('path');
var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');
var config =
entry: APP_DIR + '/index.jsx',
output:
path: BUILD_DIR,
filename: 'bundle.js'
,
module :
loaders : [
test : /\.jsx?/,
include : APP_DIR,
loader : 'babel'
,
test: /\.scss$/,
loaders: ["style", "css", "sass"]
]
;
module.exports = config;
这是我的 package.json
"name": "react-camper-leaderboard",
"version": "1.0.0",
"description": "freecodecamp leaderboard sorter",
"main": "index.js",
"scripts":
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack -d --watch",
"build": "webpack -p"
,
"author": "Tim Bell",
"license": "ISC",
"dependencies":
"babel-loader": "^6.2.2",
"babel-preset-es2015": "^6.5.0",
"babel-preset-react": "^6.5.0",
"bootstrap": "^4.0.0-alpha.2",
"bootstrap-loader": "^1.0.8",
"bootstrap-sass": "^3.3.6",
"css-loader": "^0.23.1",
"file-loader": "^0.8.5",
"node-sass": "^3.4.2",
"react": "^0.14.7",
"react-dom": "^0.14.7",
"resolve-url-loader": "^1.4.3",
"sass-loader": "^3.1.2",
"style-loader": "^0.13.0",
"url-loader": "^0.5.7"
,
"devDependencies":
"css-loader": "^0.23.1",
"node-sass": "^3.4.2",
"sass-loader": "^3.1.2",
"webpack": "^1.12.13"
,
"babel":
"presets": [
"es2015",
"react"
]
【问题讨论】:
【参考方案1】:查看example from the sass-loader。你的webpack.config.js
应该是这样的:
module.exports =
...
module:
loaders: [
test: /\.woff2?$|\.ttf$|\.eot$|\.svg$/,
loader: "file"
,
test: /\.scss$/,
loaders: ["style", "css", "sass"]
]
;
既然你已经添加了一堆加载器,你应该确保它们都安装好了:
npm i file-loader style-loader css-loader sass-loader --save-dev
然后你应该将main.scss
作为 webpack 条目添加到webpack.config.js
...
module.exports =
...
entry: [
path.resolve(__dirname, '..', 'path', 'to', 'main.scss'),
// add other entries
],
...
...或者只是需要/将其导入您的main.js
:
require("./path/to/main.scss");
由于 bootstrap 需要配置其 url()
路径,因此您需要在导入 bootstrap 之前设置 $icon-font-path
。你的main.scss
应该是这样的:
$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
@import "~bootstrap-sass/assets/stylesheets/bootstrap";
如果你觉得 @import "~bootstrap-sass/assets/stylesheets/bootstrap";
看起来很丑,你也可以给你的 webpack.config.js
添加一个别名:
module.exports =
...
resolve:
alias:
"bootstrap-sass$": "bootstrap-sass/assets/stylesheets/bootstrap"
,
那你只需要写:
@import "~bootstrap-sass";
【讨论】:
【参考方案2】:./~/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.woff2
路径可能有问题。 bootstrap-sass 通过 sass 文件需要,但是 webpack 找不到。
【讨论】:
我的错,我的意思是 webpack。但是在修复了这个错误之后,他会得到你写的那个。【参考方案3】:您import
、require
或以任何其他方式加载的每个扩展程序都必须有自己的加载程序。
截至woff2
,您可能已经添加了类似的内容:
test: /\.woff2$/,
loader: 'url',
query:
limit: 10240,
name: 'static/[hash].[ext]'
您可能想检查url-loader
documentation 接受的所有参数。
您还可以匹配多个不同的文件名模式以与同一个加载器一起使用,例如:
test: /\.(eot|ttf|svg|png|gif|woff2?$/,
loader: 'url',
query:
limit: 10240,
name: 'static/[hash].[ext]'
这将加载所有这些扩展。
【讨论】:
以上是关于如何配置 webpack 以运行 bootstrap 和 sass?的主要内容,如果未能解决你的问题,请参考以下文章
如何在故事书中配置 webpack 以允许 babel 在项目文件夹之外导入反应组件
如何通过 vue-cli 3 配置 webpack 以使用 sass
如何在我的项目中配置 webpack 以使用 compass
如何使 webpack typescript 响应 webpack-dev-server 配置以自动构建和重新加载页面