加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

twitter-bootstrap – 为什么webpack scss不想包含字体?

发布时间:2020-12-17 21:25:12 所属栏目:安全 来源:网络整理
导读:我有一个简单的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:
我有一个简单的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,有帮助,但我想保持它为真

ERROR in
./node_modules/css-loader?{“sourceMap”:true,”modules”:true,”importLoaders”:1,”localIdentName”:”[local]_[hash:base64:3]”}!./node_modules/postcss-loader/lib?{“plugins”:[null],”sourceMap”:true}!./node_modules/sass-loader/lib/loader.js?{“sourceMap”:true,”outputStyle”:”compressed”}!./src/client/assets/styles/styles.scss
Module not found: Error: Can’t resolve ‘~font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0’ in
‘/Users/vardius/Projects/webpack/src/client/assets/styles’
@ ./node_modules/css-loader?{“sourceMap”:true,”outputStyle”:”compressed”}!./src/client/assets/styles/styles.scss
7:134621-134683

解决方法

我有同样的问题,我找到了解决这个错误的方法.

首先,我删除了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;

希望这可以解决您的错误.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读