補足スタイルパッケージ：
1.CSS-Loaderの一般的な構成
一方、configure CSS-ローダーにしたい場合、あなたは文字列を書き込み、オブジェクトを書き込むことができません
{
test: /\.scss$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 2
}
},
'sass-loader',
'postcss-loader'
]
}
コンフィギュレーションオプションimportLoadersプロパティが、これは、このように導入されたファイルのインポートSCSSによってSCSSファイルの構成パラメータの意味で、私たちもそう、postcssローダとSASS-ローダーで、前の2つのローダーの導入前に行くつもりですこれは、SCSSファイルのjsファイルの導入に直接保証、または任意の問題を持っていないだろう、今度は下から上へ、すべてのローダーを実行しますSCSSファイルSCSSファイルの導入に行くだろう。
2.cssは、モジュラーパッケージ
我々はJSファイルで導入されたSCSSスタイル、CSSスタイルは、別のファイルに影響します
たとえば、我々はindex.jsにSCSSファイルを導入しました
import './index.scss'
import createImage from './createdImage'
createImage ()
私たちは、createImage.jsファイルを書き込みます
import image from './image.jpg'
function createdImage () {
var img = new Image();
img.src = image
img.classList.add('image')
var root = document.getElementById('root')
root.append(img)
}
export default createdImage
実行し、index.scssスタイルをレンダリングするページで見つけることができ、index.jsに導入されたスタイルがあるcreatedImage.jsスタイルに影響を与える可能性が、このスタイルの導入が世界的であるし、このような問題を導入するのは簡単です、簡単にこれが世界的な環境汚染、のCSSモジュールのコンセプト持つ
モジュラーCSS
モジュラーCSSは、このモジュールでのみ有効指し、我々はwebpack.comfig.jsでCSS-ローダーで設定項目をモジュールのプロパティを追加する必要があります
{
loader: 'css-loader',
options: {
importLoaders: 2,
modules: true
}
},
CSSを意味オープン、モジュラーパッケージは
また変わる紹介：import style from './index.scss'
今回の実行を、我々はスタイルの導入を有効にするcreatedImage.jsで導入のみスタイル、スタイルを追加する方法を変更する必要があり、createdImage.jsスタイルに影響を与えない変更されたことがわかりましたstyle.类名フォーム
import style from './index.scss'
import image from './image.jpg'
function createdImage () {
var img = new Image();
img.src = image
img.classList.add(style.image)
var root = document.getElementById('root')
root.append(img)
}
export default createdImage
正常に実行することができます
スタイルと他の文書ではないで、私たちは、このプロパティ結節CSSを設定したとき、私たちは、コード、スタイルでこの構文からのインポートを書き込むことができ、このことの利点をもたらす文法、現在の文書またはモジュールカップリングと私たちはスタイルを書くので、競合は存在しませんすることは非常に独立しています。
WebPACKの使用方法3.フォントファイルを詰め
、ローカルにダウンロードするiconfontアイコンに。ファイル解凍後に得られた
あなたは無用削除することができiconfont.js
フォントファイルをパッケージ化する方法を？
我々 iconfont.ttf 4つのフォントファイルの下に新しいsrcディレクトリに、iconfont.eot、iconfont.svg、iconfont.woffフォントフォルダ、書かれた文のフォントをiconfont.css、srcディレクトリに置きます最初の代わりに、フォントファイルの参照アドレスを変更.font/字体文件名
iconfont.scssにおけるいくつかのクラスを提供してくれ、私たちは、これらのアイコンを使用することができます
使用を。
import './iconfont.scss'
var root = document.getElementById('root')
root.innerHTML = '<div class="iconfont iconfood-hotdog">热狗</div>'
WebPACKのはEOTを認識しないので、しかし、この時間は、プロジェクトがパックする方法と、ので、このフォントファイルのため、だけでなく、WebPACKの構成で終了すると、あなたはファイル・ローダーを使用することができ、TTFフォントファイルをエラーを実行します
{
test: /\.(eot|ttf|svg|woff)$/,
use: {
loader: 'file-loader'
}
},
実際には、我々は唯一のSRCディレクトリのdistディレクトリから移動するために使用するファイル・ローダーに必要な
、通常のiconfontののページのアイコンを表示することができ
、フォントファイルを詰めWebPACKの完了
公式サイトを学ぶ：DOCUMENTATION ---->ガイド----->アセットマネジメントの
ドキュメンテーション---->ローダー----->のスタイルにサス・ローダー、CSS-ローダー、ローダースタイル、postcss-ローダー、総合的な理解をパッケージ化。
