背景
项目中经常会有一些样式会重复使用,比如字体颜色、大小等,为了实现复用的效果,可以引入 sass/less,利用变量、函数等来实现,如果有某些定义的变量和函数希望可以全局使用,而不用每次都引入之后使用,应该怎么做?
sass 和 less 的配置都是一样的,以 sass 为例,假设以下文件包含的变量,函数,混合都需要设置到全局,改如何配置:
src/styles/variables.sass
$font-color: #0A1B2E;
$font-size: 16px;
$primary-color: #009C84;
// 定义一个函数
@function border-color($color) {
@return unquote("1px solid #{$color}");
}
// 定义一个混合
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
一、使用 sass-loader
webpack.config.js 配置
module.exports = {
module: {
rules: [
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
additionalData: `@import "@/styles/variables.scss";`
}
}
]
}
]
}
}
vue.config.js 配置
module.exports = {
css: {
loaderOptions: {
sass: {
additionalData: `@import "@/styles/variables.scss";`
}
}
},
}
loaderOptions 对象用于配置 CSS 预处理器的选项,而 sass 对象则是配置 SASS 预处理器的选项,additionalData 选项在 sass 预处理时每个 SASS 文件的顶部插入配置共享到全局的 SASS 代码,这些代码可以包含变量、混合、函数等,然后这些代码就可以在所有的 SASS 文件中使用,而不需要在每个文件中都重复定义。
二、使用 vue-cli-plugin-style-resources-loader 插件
- 安装插件
npm install @vue/cli-plugin-style-resources-loader -D
- 配置 vue.config.js
module.exports = {
pluginOptions: {
'style-resources-loader': {
preProcessor: 'scss',
patterns: [
path.resolve(__dirname, './src/styles/variables.scss'),
]
}
}
}
使用此插件的效果和原理和 sass-loader 是一样的
扩展
sass-loader 是一个用于 Webpack 的加载器,用于处理 SASS 和 SCSS 文件。它提供了以下常用功能,包括:
-
导入 CSS 文件:你可以使用 @import 指令来导入其他的 CSS 文件。这对于将 CSS 文件作为模块导入到 SASS 或 SCSS 文件中非常有用。
-
嵌套规则:你可以使用嵌套规则来简化 CSS 的书写。例如,你可以使用 & 符号来引用父选择器。
-
变量:你可以使用变量来存储和重用值。这对于存储颜色、字体、间距等常用的值非常有用。
-
混合:你可以使用混合来重用 CSS 规则。这对于创建可重用的样式模板非常有用。
-
继承:你可以使用继承来创建 CSS 类之间的关系。这对于创建类似于面向对象编程中的类之间的关系非常有用。
-
函数和指令:你可以使用函数和指令来创建复杂的样式逻辑。例如,你可以使用 @if、@for、@each 等指令来创建条件样式和循环样式。
-
模块化:你可以使用 SASS 或 SCSS 文件来创建模块化的样式。这对于组织和管理大型的样式库非常有用。
-
源映射:sass-loader 支持生成源映射,这对于在浏览器中调试 SASS 或 SCSS 代码非常有用。