タグ別アーカイブ: CSS

webpack 2 で postcss を使う

前回の記事で webpack 2 を利用した SPA の開発環境の構築を記載しましたが, webpack 2 で postcss を導入してみたいと思います.

1. Install postcss

npm install --save-dev css-loader postcss-loader postcss-easy-import extract-text-webpack-plugin

2. Create webpack.config.js

const webpack           = require('webpack');
const ExtrackTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: ['./src/main.js', './src/main.css'],
  output: { path: `${__dirname}/public`, filename: 'app.js' },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: ExtrackTextPlugin.extract({
          use: [
            'css-loader',
            'postcss-loader'
          ]
        })
      }
    ]
  },
  plugins: [
    new webpack.LoaderOptionsPlugin({
      options: {
        postcss: [
          require('postcss-easy-import')({ glob: true })
        ]
      }
    }),
    new ExtrackTextPlugin('app.css')
  ],
  devtool: 'source-map',
  devServer: {
    contentBase: `${__dirname}/public`,
    port: 8080,
    inline: true,
    historyApiFallback: true
  }
};

赤字で表示している記述が, 1.x からの大きな変更点です. 1.x では, 以下のように記述していました (していたそうです …)

// ...
entry : {
  js: './src/main.js',
  css: './src/main.css'
},
//

webpack 2 で 1.x の記述をしてしまうと, 以下のようなエラーが発生してしまいます.

ERROR in chunk css [entry]
app.js
Conflict: Multiple assets emit to the same filename app.js

3. src/main.css

@charset "UTF-8";

@import "./styles/base.css";
@import "./components/**/*.css";

npm でインストールした postcss-easy-import プラグインで Sass のような, CSS のインポートが可能になります.

4. src/styles/base.css

:root {
    --base-color: #ff1493;
}

body {
    margin: 0;
    padding: 0;
    line-height: 1.5;
    font-family: Helvetica, Arial, sans-serif;
    color: var(--base-color);
}

こちらも同様に, Sass のような CSS 変数の利用が可能になります.

以上で, webpack 2 を利用したCSS のビルド環境も構築できました.
あとは,

$ npm run build

を実行すると, public/app.css が生成されます. また, JavaScript ファイルと同様, 変更して保存すると, ブラウザが自動でリロードされます.

参考

CSS vm / vh / vmin / vmax メモ

CSS Values and Units Module Level 3 – vm / vh / vmin / vmax
Unit Description
vw (viewport width) Viewport の横幅を 100 としたときの 1/ 100
vh (viewport height) Viewport の高さを 100 としたときの 1/ 100
vmin (viewport minimum) vw / vh のうち, 小さいほうの値
vmax (viewport maximam) vw / vh のうち, 大きいほうの値

 

例えば …

  • Viewport 800px の場合, 1vw は 8px
  • Viewport 1000px の場合, 1vw は 10px

CSS position: fixed で センタリングする 2

CSS で position: fixed; にしてしまうと, margin: auto; などでのセンタリングが効かなくなります.

センタリングしたい要素のサイズがわからない場合は, さらにやっかいです.

しかし, 方法はあります.

<div style="position: fixed; z-index: 1; width: 100%; text-align: center;">
    <div style="display: inline-block; padding: 0.75em 1em; font-size: 12px; color: #fff; background-color: #999;">Fixed</div>
</div>

ポイントはセンタリングしたい要素を囲むブロックに対して, 以下の3つのスタイルを定義することです.

position: fixed;
width: 100%;
text-align: center;

あとは, センタリングしたい要素を inline-block にするだけです.

Fixed

CSS position: fixed で センタリングする 1

CSS で position: fixed; にしてしまうと, margin: auto; などでのセンタリングが効かなくなります.

しかし, 要素のサイズ (width と height) がわかっている場合, left と margin-left を利用することでそれを解決できます.

ポイントは2つです

left: 50&;
margin-left: -(ブロックの width の 1/2)  /* ネガティブ margin */
Fixed