CODEWITHSUNDEEP
webpacklesswebpack-2
user1820686
user1820686

Reputation: 2117

Webpack 2: do not compile fonts in .less file

I'm trying to run webpack 2 (2.6.1) with less compiling to css. Came across to problem with fonts - if there is an @font-face in .less file then error occurs.

@charset "UTF-8";
@font-face {
  font-family: 'Exo2Medium';
  src: url("./fonts/Exo2Medium/Exo2Medium.eot");
  src: local("�?�"), url("./fonts/Exo2Medium/Exo2Medium.woff") format("woff"), url("./fonts/Exo2Medium/Exo2Medium.otf") format("opentype");
}

After some searching I'd found a solution that could resolve such problem:

module: {
    rules: [
        { test: /\.tsx?$/, loader: "awesome-typescript-loader" },
        { enforce: "pre", test: /\.js$/, loader: "source-map-loader" },
        {
            test: /\.less$/,
            use: ExtractTextPlugin.extract({
                loader:[ 'css-loader', 'less-loader' ],
                fallback: 'style-loader'
            })
        },
        {
            test: /\.(png|woff|woff2|eot|ttf|otf|svg)$/, loader: 'url-loader?limit=100000'
        }
    ]
}

But in this case all fonts compiles into output .css file. Is it possible to keep in .css only a link to font?

Upvotes: 0

Views: 532

Answers (1)

Andrea Carraro
Andrea Carraro

Reputation: 10419

Webpack file-loader is the solution you are looking for.

Upvotes: 1

Related Questions