はじめに
bootstrapがclass="bootstrap-scope"の内部にだけ適用されるようにするため、
postcss-prefixwrapを使って、全てのセレクタの前に.bootstrap-scopeを追加することで適用範囲を限定します
<div class="bootstrap-scope">
<!-- Bootstrapのスタイルが適用される領域 -->
<button class="btn btn-primary">Bootstrap Button</button>
</div>
既存環境にBootstrapを適用すると全体のレイアウトが変わってしまうような場合に、範囲を限定して適用することができます
1. 必要なライブラリをインストール
$ npm init -y
$ npm install bootstrap postcss postcss-cli postcss-prefixwrap
2. PostCSS設定ファイルを作成
- bootstrapの全てのセレクタの前に
.bootstrap-scopeを追加する設定を行う
postcss.config.js
const prefixWrap = require('postcss-prefixwrap');
module.exports = {
plugins: [
prefixWrap('.bootstrap-scope')
]
};
3. PostCSSで処理
$ npx postcss node_modules/bootstrap/dist/css/bootstrap.min.css -o scoped-bootstrap.css
4. 動作確認
動作確認用htmlを作成します
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="scoped-bootstrap.css">
<title>範囲限定Bootstrapテスト</title>
</head>
<body>
<div class="bootstrap-scope">
<!-- bootstrap適用領域 -->
<button class="btn btn-primary">Bootstrap Button</button>
</div>
<!-- bootstrap適用範囲外 -->
<button class="btn btn-primary">Default Button</button>
</body>
</html>
動作確認のため簡易webサーバーを起動します
$ npx http-server .
<div class="bootstrap-scope">配下のみBootstrapが適用されることが確認できました
