當我們開始在Vue項目中使用SCSS,我們需要首先安裝依賴。在Vue CLI 3.0中,我們可以使用以下命令:
npm install -D sass-loader node-sass
這將安裝并引入兩個包:node-sass和sass-loader。接著我們需要在vue.config.js
中配置sass-loader。我們可以這樣寫:
module.exports = {
css: {
loaderOptions: {
sass: {
data: `@import "@/scss/main.scss";`
}
}
}
}
上述代碼中,我們告訴sass-loader在每個sass文件中都引入main.scss
。同時,在main.scss
中,我們可以定義全局變量和mixin:
// 定義顏色變量
$primary-color: #007bff;
$secondary-color: #6c757d;
// 定義flexbox mixin
@mixin flex {
display: flex;
justify-content: center;
align-items: center;
}
// 引入normalize.css
@import "~normalize.css/normalize.css";
// 引入重置樣式
@import "./reset.scss";
// 引入其他樣式文件
@import "./components/button.scss";
在Vue組件中使用SCSS非常簡單,我們只需要在