Local custom font not getting copied to target folder
Opened this issue · 7 comments
hi! when i try to use a local custom font in my project webpack doesn't copy the file to the theme folder.
i've added this: @import "./fonts.css" to my entry.pcss file.
the content of the "fonts.css" file is:
@font-face {
font-family: 'font;
font-style: normal;
font-weight: normal;
src: local('font'), url('/themes/blank/assets/fonts/font.woff') format('woff');
}
the folder "fonts" gets copied to the theme folder, but then it's empty.
any help with this issue would be much appreciated
Hi @cmdillon , I'll take a look on this in few hours. It shouldn't be hard to fix ;)
Hi! Thanks for looking into this issue. Any progress?
@cmdillon Currently investigating on this, but it's hard to found a .woff file on the web 👀
I would like to test all possible file types but only found .ttf and .otf. Can you send me a .woff file? romainb at octobercms dot fr
@RomainMazB sure here ya go...
segoe-ui-light-gdi.woff.zip
@cmdillon can you test this webpack.config.js file?
/* Required packages */
require('dotenv').config({path: __dirname + '/./../../.env'})
let path = require('path'),
webpack = require('webpack'),
browserSyncPlugin = require('browser-sync-webpack-plugin'),
miniCSSExtractPlugin = require('mini-css-extract-plugin'),
{CleanWebpackPlugin} = require('clean-webpack-plugin'),
copyPlugin = require('copy-webpack-plugin'),
fs = require('fs'),
yaml = require('js-yaml'),
CssnanoPlugin = require('cssnano-webpack-plugin'),
htmlParser = require('./modules/html-parser.js'),
TerserPlugin = require('terser-webpack-plugin')
async function config()
{
// Generate the new theme path folder form boilerplate.yaml
let themeConfig = fs.readFileSync(path.join(__dirname, 'boilerplate.yaml'), 'utf8'),
data = yaml.safeLoad(themeConfig),
from = path.resolve(`../${data.themeName}-src`),
to = path.resolve(`../${data.themeName}`),
publicPath = path.join('themes', data.themeName) + '/'
let HTMLPlugins = await htmlParser(from, to, ['htm', 'html', 'txt'])
let filesToCopy = [{from: path.join(from, 'new-theme.yaml'), to: path.join(to, 'theme.yaml')}, {from: path.join(from, 'version.yaml')}]
let pathToThemePreviewFile = path.join(from, 'assets/images/theme-preview.png')
if (fs.existsSync(pathToThemePreviewFile)) {
filesToCopy.push({from: pathToThemePreviewFile})
}
let pathToThemeConfigDir = path.join(from, 'config')
if (fs.existsSync(pathToThemeConfigDir)) {
filesToCopy.push({from: pathToThemeConfigDir, to: 'config'})
}
return {
entry: {
context: from,
},
output: {
filename: 'assets/javascript/theme.js',
path: to,
publicPath: publicPath
},
resolveLoader: {
modules: ['node_modules', 'custom_loaders']
},
plugins: [
new webpack.ProgressPlugin(),
new browserSyncPlugin({
host: 'localhost',
port: 3000,
proxy: process.env.APP_URL + ':80'
}),
new miniCSSExtractPlugin({
filename: 'assets/css/theme.css',
chunkFilename: '[id]-[hash].css',
}),
... process.env.NODE_ENV === 'production' ? [
new CleanWebpackPlugin()
] : [],
new copyPlugin(filesToCopy, {copyUnmodified: true})
].concat(HTMLPlugins),
module: {
rules: [{
test: /\.p?css$/,
use: [ miniCSSExtractPlugin.loader, 'css-loader', 'resolve-url-loader', 'postcss-loader' ],
},{
test: /\.(woff(2)?|ttf|eot|otf|svg)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: (url, resourcePath) => path.relative(from, resourcePath)
}
},{
test: /\.(webp|png|jpe?g|gif|svg|ico)$/i,
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: (url, resourcePath) => path.relative(from, resourcePath)
}
},{
test: /\.(html?|txt)$/i,
loader: 'theme-filter-loader',
options: {
from: from
}
}],
},
optimization: {
minimizer: [
new CssnanoPlugin(),
new TerserPlugin()
]
}
}
}
module.exports = config();
@RomainMazB hi! thx for the help, but for me it's still not working correctly. i use the font like in your image that you sent, now the file gets sent to the correct folder, but the font will not load to the browser.
i guess there must be something wrong with my local dev environment. just don't know what. 😞
...OK! so—i tried one more time to see if i can get it to work and it did.🍻.
but from what i can tell it's only being served from the "blank-src" folder and not getting copied to the "blank" folder. will it get copied to the "blank" folder on build for production?
btw: thx again for the help