twitter-bootstrap – 如何配置webpack来运行bootstrap和sass?
发布时间:2020-12-18 00:18:13 所属栏目:安全 来源:网络整理
导读:我对webpack不太满意.我还没有真正’学到它’,我有一个模板/样板我从我制作的回购中提取,这给了我一个在React中构建的环境.我正在努力为我的项目添加引导功能,因为我对webpack不太了解并且了解加载器等的工作方式.有人可以帮我一把吗?也许关于webpack加载器
我对webpack不太满意.我还没有真正’学到它’,我有一个模板/样板我从我制作的回购中提取,这给了我一个在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","webpack": "^1.12.13" },"babel": { "presets": [ "es2015","react" ] } } 解决方法
检查
example from the sass-loader.您的webpack.config.js应如下所示:
module.exports = { ... module: { loaders: [ { test: /.woff2?$|.ttf$|.eot$|.svg$/,loader: "file" },{ test: /.scss$/,"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"; (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |