#import syntax inside css file not resolving font file - css

Question

I am working on a react application and trying to implement CSS + Fonts.
In my react component CSS file I have regular CSS and at the very top I import my mixins
#import '../../mixins.css';
/*CSS*/
Inside my mixin file I have
mixin.css
#font-face {
font-family: 'SourceSansPro-Black';
src: url("./SourceSansPro-Black.ttf") format('truetype');
font-weight: normal;
font-style: normal;
}
Webpack throws an error
Error: Cannot resolve 'file' or 'directory' ./SourceSansPro-Black.ttf
This is my webpack config module loadres
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]'
}
}
]
},
and the postcss
postcss: (_webpack) => {
return [
require('postcss-import')({
addDependencyTo: _webpack,
path: [ 'styles', 'components'],
root: path.resolve(__dirname, 'src/app'),
skipDuplicates: true
}),
require('postcss-cssnext')()
];
},
I dont' understand why the url isn't resolving correctly.
UPDATE
I have a font.css file that looks like this
#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;
}
I then import the font.css into a mixins.css file
#import '../fonts/fonts.css';
:root {
--regular: {
font-family: 'SourceSansPro-Regular';
font-style: normal;
font-weight: normal;
}
}
Then in my react component I have this:
#import 'styles/mixins.css';
.regular {
#apply --regular;
}
There is no error (or warning) that states any issues with loading the fonts via the 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]'
}
}
]
}
An interesting thing is that if I use the ExtractTextWebpackPlugin on the CSS the above works, the fonts get rendered. If I do it this way the tradeOff is there is no CSS hot reloading.
Any suggestions on how to get the fonts to load without the extract-text plugin?