我正在 webpack 处理的 sass 项目中使用 Bootstrap 5,我想使用 SASS 变量自定义导航栏的字体系列。我尝试了各种方法,但似乎无法做到正确。这是我到目前为止所做的尝试:
在我的 custom.scss 文件中:
$primary: #FFBE0B;
$secondary: #FB5607;
$success: #3A86FF;
$info: #FF006E;
$light: #8338EC;
@font-face {
font-family: 'Inter-Bold';
src: url('../fonts/inter/Inter-Bold.ttf') format('ttf');
font-weight: normal;
font-style: normal;
}
$navbar-link-font-family: 'Inter-Bold', sans-serif;
$navbar-link-font-size: 16px;
$navbar-link-font-weight: 500;
$navbar-link-color: #333;
$navbar-link-font-family: $navbar-link-font-family;
$navbar-link-font-size: $navbar-link-font-size;
$navbar-link-font-weight: $navbar-link-font-weight;
$navbar-link-color: $navbar-link-color;
$navbar-brand-font-size: 1.5rem;
$font-family-base: $navbar-link-font-family
在我的 styles.scss 文件中:
@import "./custom.scss";
@import "../../node_modules/bootstrap/scss/bootstrap";
我的 webpack 配置:
'use strict'
const path = require('path')
const autoprefixer = require('autoprefixer')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require("webpack");
module.exports = {
mode: 'development',
entry: './src/js/main.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
clean: true,
},
devServer: {
static: path.resolve(__dirname, 'dist'),
port: 8080,
hot: false
},
plugins: [
new HtmlWebpackPlugin({ template: './src/index.html' }),
new webpack.HotModuleReplacementPlugin(),
],
module: {
rules: [
{
test: /\.(scss)$/,
use: [
{
// Adds CSS to the DOM by injecting a `<style>` tag
loader: 'style-loader'
},
{
// Interprets `@import` and `url()` like `import/require()` and will resolve them
loader: 'css-loader'
},
{
// Loader for webpack to process CSS with PostCSS
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
autoprefixer
]
}
}
},
{
// Loads a SASS/SCSS file and compiles it to CSS
loader: 'sass-loader'
}
]
}
]
}
}
如何正确覆盖导航栏的字体系列?
Bootstrap 样式的优先级高于您在 scss 中编写的常规样式。如果您本地安装了 bootstrap,您可以自己编辑带有颜色的文件以获得最佳实践。
作为最后的手段,您可以使用 !important 标签来覆盖 sass 变量上的引导样式。