前提・実現したいこと
カスタムフォントを@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') ] } ]
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。