@导入css文件内的语法，而不是解析字体文件

我正在开发一个react应用程序，并尝试实现CSS+字体

在我的react组件CSS文件中，我有常规的CSS，在最上面我导入了我的混音

@import '../../mixins.css';
/*CSS*/

在我的mixin文件中我有

mixin.css

@font-face {
  font-family: 'SourceSansPro-Black';
  src: url("./SourceSansPro-Black.ttf") format('truetype');
  font-weight: normal;
  font-style: normal;
}

Webpack抛出一个错误

Error: Cannot resolve 'file' or 'directory' ./SourceSansPro-Black.ttf

这是我的网页包配置模块加载

module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel',
        include: [
          path.resolve(__dirname, 'src/app')
        ]
      },
      {
        test: /\.css$/,
        include: [
          path.resolve(__dirname, 'src/app/styles'),
          path.resolve(__dirname, 'src/app/components')
        ],
        loader: combineLoaders([
          {
            loader: 'style'
          },
          {
            loader: 'css',
            query: {
              modules: true,
              sourceMap: true,
              localIdentName: '[folder]__[local]--[hash:base64:10]'
            }
          },
          {
            loader: 'postcss'
          }
        ])
      },
      // Font Definitions
      {
        test: /\.ttf$/,
        include: [
          path.resolve(__dirname, 'src/app/assets/fonts')
        ],
        loader: 'url',
        query: {
          limit: 50000,
          mimetype: 'application/octet-stream',
          name: './fonts/[name].[ext]'
        }
      }
    ]
  },

邮递员呢

postcss: (_webpack) => {
    return [
      require('postcss-import')({
        addDependencyTo: _webpack,
        path: [ 'styles', 'components'],
        root: path.resolve(__dirname, 'src/app'),
        skipDuplicates: true
      }),
      require('postcss-cssnext')()
    ];
  },

我不明白为什么

url

解析不正确

更新 我有一个

font.css

文件，看起来像这样

@font-face {
  font-family: 'SourceSansPro-Bold';
  src: url('./SourceSansPro-Bold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'SourceSansPro-Regular';
  src: url('./SourceSansPro-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'SourceSansPro-Light';
  src: url('./SourceSansPro-Light.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

然后我将

font.css

导入到

mixins.css

文件中

@import '../fonts/fonts.css';
:root {
  --regular: {
    font-family: 'SourceSansPro-Regular';
    font-style: normal;
    font-weight: normal;
  }
}

然后在我的react组件中，我有：

@import 'styles/mixins.css';

.regular {
  @apply --regular;
}

通过

url（）

加载字体时不会出现任何错误（或警告）

webpack.config

module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel',
        include: [
          path.resolve(__dirname, 'src/app')
        ]
      },
      {
        test: /\.css$/,
        include: [
          path.resolve(__dirname, 'src/app/assets/fonts'),
          path.resolve(__dirname, 'src/app/assets/styles'),
          path.resolve(__dirname, 'src/app/components')
        ],
        loader: combineLoaders([
          {
            loader: 'style',
          },
          {
            loader: 'css',
            query: {
              modules: true,
              sourceMap: true,
              localIdentName: '[folder]__[local]--[hash:base64:10]'
            }
          },
          {
            loader: 'resolve-url',
            query: {
              sourceMap: true,
              silent: false,
              fail: true,
              keepQuery: true
            }
          },
          {
            loader: 'postcss',
            query: {
              sourceMap: true
            }
          }
        ])
      },
      // Font Definitions
      {
        test: /\.ttf$/,
        include: [
          path.resolve(__dirname, 'src/app/assets/fonts')
        ],
        loader: 'url',
        query: {
          limit: 100000,
          mimetype: 'application/octet-stream',
          name: './fonts/[name].[ext]'
        }
      }
    ]
  }

有趣的是，如果我在CSS上使用

ExtractTextWebpackPlugin

，上面的工作就会正常，字体就会被渲染出来。如果我这样做，折衷是没有CSS热加载

---

关于如何在没有

extract text plugin

的情况下加载字体的任何建议？

事实证明，如果我在css加载程序中设置

sourceMap:false

，我可以在字体正常工作的情况下重新加载字体。但是现在我没有sourcemap:）这里已经报告了这个问题：我也发现了这个问题：这解释了问题和解决方案。干杯事实证明，如果我在css加载程序中设置

sourceMap:false

，我可以在字体正常工作的情况下重新加载。但是现在我没有sourcemap:）这里已经报告了这个问题：我也发现了这个问题：这解释了问题和解决方案。干杯