scss中动态引入scss文件

在scss中动态引入scss文件有两种方式：使用@import和使用sass-resources-loader。

1. 使用@import：在scss文件中使用@import 'url'语句可以引入外部的scss文件。可以使用相对路径或绝对路径指定要引入的文件。例如：@import '../common.scss'。

2. 使用sass-resources-loader：sass-resources-loader是一个webpack loader，可以将指定的scss文件自动注入到所有的scss文件中。在webpack配置文件中配置sass-resources-loader，指定要注入的scss文件路径即可。例如：{ loader: 'sass-resources-loader', options: { resources: path.resolve(__dirname, '../common.scss') } }。

相关问题

怎么在scss文件中引入其他scss文件中的变量

可以使用@import命令来引入其他scss文件中的变量。在被引入的scss文件中，可以通过$变量名的方式来使用该变量。例如：

在base.scss文件中定义一个变量：

$primary-color: #007bff;

然后在app.scss文件中引入base.scss文件中的变量：

@import 'base';

body {
background-color: $primary-color;
}

vue scss文件引入其他scss文件

在Vue.js项目中，当你想在SCSS文件中引入其他SCSS文件时，可以使用`@import`指令。这是SCSS语言的标准语法，用于加载并包含外部样式表。以下是步骤：

1. 首先，确保你的SCSS文件位于正确的目录结构中，比如在一个名为`styles`的子目录下，你可以有`main.scss`这样的主入口文件。

// 主入口文件 main.scss
@import 'variables'; // 引入变量文件
@import 'components/*.scss'; // 使用通配符导入组件下的所有scss文件

2. 然后，在`variables.scss`或`components`目录下的每个`.scss`文件中编写你的样式，并通过相同的`@import`规则来引用它们。

3. 在Vue组件的<style lang="scss">标签内引用`main.scss`，这样样式会应用到该组件上。

<template>
  <!-- ... -->
</template>

<style lang="scss" scoped>
@import "~@/styles/main.scss";
</style>

<script>
export default {
  // ...
};
</script>

这里的`~`前缀告诉Webpack模块加载器需要从当前文件夹的上级目录查找SCSS文件。