質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

1405閲覧

webpackを用いた、sass(カスタムフォントを含む)のコンパイル

退会済みユーザー

退会済みユーザー

総合スコア0

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1グッド

1クリップ

投稿2018/08/10 07:31

前提・実現したいこと

カスタムフォントを@font-faceでsassに追加して、
webpack4でcssにコンパイルしたいと考えています。
現在は、@font-faceさえ削除すれば、問題なく動作する状態です。
@importも同様に問題なくコンパイルされています。

構造

root └ assets └ css └ fonts └ src └ webpack.config.js

sass追加分

@font-face { font-family: 'icon'; src: url(../../fonts/icon.eot); src: url(../fonts/icon.eot) format(embedded-opentype), url(../fonts/icon.ttf) format(truetype), url(../fonts/icon.woff) format(woff), url(../fonts/icon.svg) format(svg); }

webpack.config.js

var glob = require("glob"), entriesJs = glob.sync("./assets/src/js/*.js"), entriesSass = glob.sync("./assets/src/sass/*.scss"), path = require('path'), ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = [{ entry: entriesJs, //ビルドするファイル output: { path: __dirname + '/assets/js', //ビルドしたファイルを吐き出す場所 filename: 'app.js' //ビルドした後のファイル名 }, module: { rules: [{ test: /.js$/, //ビルド対象のファイルを指定 loader: 'babel-loader', //loaderを指定 exclude: /node_modules/, //ビルド対象に除外するファイルを指定 query: //loaderに渡したいクエリパラメータを指定します { presets: ['es2015', 'stage-0'] } }] } }, { entry: { style: entriesSass }, output: { path: path.join(__dirname, 'assets/css'), filename: '[name].css' }, module: { rules: [{ test: /.(scss|sass)$/i, loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: [{ loader: 'css-loader', options: { url: true, minimize: true, sourceMap: true } }, { loader: 'postcss-loader', options: { plugins: (loader) => [ require('autoprefixer')() ], sourceMap: true } }, { loader: 'sass-loader', options: { outputStyle: 'compressed', sourceMap: true } } ] }) }, { test: /.(woff|woff2|eot|ttf|otf)$/, use: [ 'url-loader' ] } ] }, devtool: 'source-map', plugins: [ new ExtractTextPlugin('[name].css') ] } ]
hirameki👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

url-loader はファイルの内容を Data URI に変換して CSS に埋め込むので、フォントなどの容量の大きなファイルを扱う場合は file-loader を使わなければエラーが出るのではないかと思います。

投稿2018/08/10 15:30

yhg

総合スコア2161

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問