webpack StylusやSassでurl()を含んだCSSファイルなどをimportしたときエラーが出る。resolve-url-loaderで解決。 | e-joint.jp
StylusやSassでは、url() を使う際に、ベースとなるファイルからの相対パスを指定する必要があるけど、他のライブラリのStylus, Sass, CSSを読み込むとき、パスが通らずエラーが起こる。そんなときにresolve-url-loader 。 インストール。 resolve-url-loaderの使い方と注意点 webpack.config.jsでローダーを読み込む。ローダーの読み込みの順番は以下のサンプルのとーり。 注意点は、resolve-url-loader より前のローダーで soucemapが必須であること。以下のサンプルでは stylus-loader で sourceMap: true とする必要があります。でないと謎のエラーが起こってめっちゃハマる。というかめっちゃハマった。 test: /\.(styl|css)$/, use: [ { loader: M
最新版で学ぶwebpack 5入門 - スタイルシート(CSS/Sass)を取り込む方法 - ICS MEDIA
ウェブのフロントエンドエンジニア開発で人気を集めるモジュールバンドラーのwebpack（ウェブパック）。webpackにはJavaScriptファイルのバンドルだけではなく、スタイルシート（CSSやSass）のバンドルもできます。ICS MEDIAの記事「最新版で学ぶwebpack入門」では、webpackの基本的な使い方を解説しましたが、この記事ではスタイルシートに焦点をあてて解説します。 ※webpackを利用するには事前にNode.jsをインストールしておいてください。この記事では2021年5月現在最新のNode.js v14、npm 7と、webpack 5をもとに解説しています。 この記事で説明していること CSSをバンドルする利点 CSSのバンドル方法 Sassのバンドル方法 Sass内の画像もバンドルする方法 容量の閾値で画像のバンドルを制御する方法 PostCSS(Auto
【コーダー向け】webpackでSassをコンパイルする方法 | HPcode（えいちぴーこーど）
最初の構成ファイルとしては、以下のように配置していますので、同様に進めたい方は作成しておいてください。 dist・・・ビルド後の出力先フォルダsrc・・・ビルド前の出力元フォルダindex.html・・・静的HTMLファイルwebpack.config.js・・・webpackの設定ファイル index.htmlは以下のように配置しています。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>webpack Test</title> <link rel="stylesheet" href="dist/css/style.css"> </head> <body>
webpackでcssとimageをバンドルする - Qiita
webpackはJavascriptとcssやimageを一緒にまとめることができるのが、GruntやGulpといった他のタスクランナーのように設定が煩雑にならない強み、と公式サイトで見た。 実際、それがどれほど便利なのかを試してみた。 以下は、es6+babel+webpackの環境を想定しています。 cssのバンドル css-loaderをインストール。Scssを使いたいのでsass-loaderもインストールします。 // es5 'use strict'; var webpack = require('webpack'); var path = require('path'); var env = process.env.NODE_ENV; var config = { module: { loaders: [ { test: /\.js$/, loaders: ['babel-l
webpack/sass-loaderでimport毎に共通ファイルを読み込ませる - Qiita
Webpackを使ってReactなどのコンポーネントファイルから同じ粒度に分割したCSS/Sassを書いているとき、 Sassの変数やmixinなど、Globalにimportしておきたいファイルについて頭を悩ませることがあります。 sass-loader に data optionを設定するとうまいこと実現できます。 sass-loader/environment-variables 先に言っておくと、 data は node-sass を通して Libsass へオプションをそのまま通しているだけのようです。 node-sass/data サンプルコード Webpack設定 var path = require('path'); module.exports = { entry: './app/index.js', output: { filename: 'bundle.js', pa
最新版で学ぶwebpack 5入門 - スタイルシート(CSS/Sass)を取り込む方法 - ICS MEDIA
ウェブのフロントエンドエンジニア開発で人気を集めるモジュールバンドラーのwebpack（ウェブパック）。webpackにはJavaScriptファイルのバンドルだけではなく、スタイルシート（CSSやSass）のバンドルもできます。ICS MEDIAの記事「最新版で学ぶwebpack入門」では、webpackの基本的な使い方を解説しましたが、この記事ではスタイルシートに焦点をあてて解説します。 ※webpackを利用するには事前にNode.jsをインストールしておいてください。この記事では2021年5月現在最新のNode.js v14、npm 7と、webpack 5をもとに解説しています。 この記事で説明していること CSSをバンドルする利点 CSSのバンドル方法 Sassのバンドル方法 Sass内の画像もバンドルする方法 容量の閾値で画像のバンドルを制御する方法 PostCSS(Auto
Sass を試す - アカベコマイリ
年末に PostCSS + cssnext と CSS Modules を試したのだが、コメ欄の指摘とそれを受けた追記を読んでもらえるとわかるとおり次世代 CSS 仕様の先取り = CSS.next のつもりで導入した cssnext が微妙だと感じはじめている。 cssnextを使うべきか - yuhei blog QiitaのCSS構成2017 - Qiita これらの記事でも言及しているとおり cssnext の採用する PostCSS プラグイン は CSS Working Group の認知していなかったり取り下げられそうなものもある。前者は直せばよいけど後者については直近の仕様だと冗長な記述が避けられないことを意味している。私は少なくとも モジュール管理 @import が URL ではなくモジュール参照として解決される 変数 (定数) と Mix-In 色やサイズなどを変数
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
