Question

我有一个简单的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",
          options: {
            sourceMap: true,
            outputStyle: "compressed"
          }
        }
      ]
    })
  },

但是在尝试包含我的scss文件时出现错误

Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve '~font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0'

更改modules: true,的值会有所帮助，但我希望将其保留为true

错误 ./node_modules/css-loader?{"sourceMap":true,"modules":true,"importLoaders":1,"localIdentName" ：＆＃34; [本地] _ [散列：BASE64：3]！＆＃34;} ./ node_modules / postcss装载机/ lib中{＆＃34;插件＆＃34;：[空]，＆＃34; sourceMap＆＃34;：！真} ./ node_modules /上海社会科学院装载机/ lib目录/ loader.js {＆＃34; sourceMap＆＃34;：？真，＆＃34; outputStyle＆＃34;：＆＃34;压缩＆＃34 ;} ./ SRC /客户/资产/风格/ styles.scss 找不到模块：错误：无法解析＆＃39; ~font-awesome / fonts / fontawesome-webfont.eot？v = 4.7.0＆＃39;在＆＃39; /用户/ vardius /项目/的WebPack / src目录/客户/资产/样式＆＃39; @ ./node_modules/css-loader?{"sourceMap":true,"modules":true,"importLoaders":1,"localIdentName" ;：＆＃34; [本地] _ [散列：BASE64：3]！＆＃34;} ./ node_modules / postcss装载机/ lib中{＆＃34;插件＆＃34;：[空]，＆＃34 ; sourceMap＆＃34;：真} ./ node_modules / SASS装载机/ LIB / loader.js {＆＃34; sourceMap＆＃34;：真，＆＃34; outputStyle＆＃34;：＆＃34;压缩＆＃ 34;} ./ SRC /客户/资产/风格/ styles.scss 7：134621-134683

Answer 1

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

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

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

为什么webpack scss不想包含字体？

1 个答案: