twitter-bootstrap – 为什么webpack scss不想包含字体?
我有一个简单的scss文件
$fa-font-path: "~font-awesome/fonts"; $bootstrap-sass-asset-helper: false !default; $icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/"; $icon-font-name: "glyphicons-halflings-regular" !default; $icon-font-svg-id: "glyphicons_halflingsregular" !default; @import "~bootstrap-sass/assets/stylesheets/bootstrap"; @import '~font-awesome/scss/font-awesome'; *,*:before,*:after { box-sizing: border-box; } html { position: relative; min-height: 100%; } body { background-color: $bg; margin-bottom: 60px; } 我的webpack加载器看起来像这样: { test: /.(woff|woff2)(?v=d+.d+.d+)?$/,use: { loader: 'url-loader',options: { limit: 10000,mimetype: 'application/font-woff' } } },{ test: /.(ttf|eot|svg)(?v=d+.d+.d+)?$/,use: 'file-loader' },{ test: /.scss$/,include: [ path.resolve(process.cwd(),"src/client/assets/styles"),],use: ExtractTextPlugin.extract({ fallback: "style-loader",use: [ { loader: "css-loader",options: { sourceMap: true,modules: true,importLoaders: 1,localIdentName: '[local]_[hash:base64:3]' } },{ loader: "postcss-loader",options: postcssLoaderOptions },{ loader: "sass-loader",outputStyle: "compressed" } } ] }) }, 但是在尝试包含我的scss文件时出现错误 模块构建失败:ModuleNotFoundError:找不到模块:错误:无法解析’~font-awesome / fonts / fontawesome-webfont.eot?v = 4.7.0′ 更改模块的值:true,有帮助,但我想保持它为真
解决方法
我有同样的问题,我找到了解决这个错误的方法.
首先,我删除了font-awesome scss文件夹中_path.scss中字体文件后的版本号. src: url('#{$fa-font-path}/fontawesome-webfont.eot'); src: url('#{$fa-font-path}/fontawesome-webfont.eot') format('embedded-opentype'),url('#{$fa-font-path}/fontawesome-webfont.woff2') format('woff2'),url('#{$fa-font-path}/fontawesome-webfont.woff') format('woff'),url('#{$fa-font-path}/fontawesome-webfont.ttf') format('truetype'),url('#{$fa-font-path}/fontawesome-webfont.svg#fontawesomeregular') format('svg'); 然后我添加了$fa-font-path变量的完整文件夹路径 $fa-font-path : "./assets/vendor/font-awesome/fonts" !default; 希望这可以解决您的错误. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |