こんにちは。KOUKIです。
VueJSにsassローダーを導入し、SASSを使えるようにしましょう!
前提条件
sassモジュールのインストール
sassを導入するには、以下のモジュールが必要です。
|
1 2 3 |
npm install --save sass-loader node-sass |
webpackコンフィグファイルの作成
続いて、webpackコンフィグファイルを作成して、sassローダーを読み込めるようにします。
|
1 |
touch webpack.config.js |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
module.exports = { module: { rules: [ { test: /\.s[ac]ss$/i, use: [ // Creates `style` nodes from JS strings 'style-loader', // Translates CSS into CommonJS 'css-loader', // Compiles Sass to CSS 'sass-loader', ], }, ], }, }; |
sassの導入方法
sassを使うには、styleタグにlang=”scss”を指定する必要があります。
|
1 2 3 4 5 6 7 8 |
<style lang="scss" scoped> $deleteBtnColor: tomato; .delete { background-color: $deleteBtnColor; } </style> |
これでOKです！
まとめ
VueJSでsassが使えれば、より効率的なプログラムがかけますね^^
よかったら参考にしてください。
それでは、また！
にほんブログ村
最近のコメント