vue3 scss 样式中 路径拼接

在 Vue 3 中使用 SCSS 样式时，可以通过以下方式拼接路径：

方法1：使用相对路径

@import "../path/to/style.scss";

方法2：使用 ~ 符号引入模块

@import "~path/to/style.scss";

在这两种方法中，你需要根据你的项目结构和文件位置来拼接正确的路径。例如，如果你要引入的样式文件位于当前文件的上一级目录，可以使用 `../` 来表示上一级目录。

希望对你有所帮助！如果你还有其他问题，请随时提问。

相关问题

vue2scss样式穿透

在 Vue 2 中，可以使用 `::v-deep` 或 `/deep/` 来进行样式穿透（也被称为深度选择器）。样式穿透允许你在子组件中修改父组件的样式。

例如，假设你有一个父组件的样式是这样的：

.parent {
  .child {
    color: red;
  }
}

在子组件中，你可以使用 `::v-deep` 或 `/deep/` 来修改父组件的样式：

<style scoped>
.child ::v-deep .parent {
  .child {
    color: blue;
  }
}
</style>

注意，使用 `::v-deep` 或 `/deep/` 会禁用样式作用域，因此你需要将 `<style>` 标签的 `scoped` 属性移除。另外，如果你正在使用 SCSS 预处理器，则需要确保已经正确配置了相关的插件。

vue3 scss 使用js中的变量

在Vue3中，使用SCSS（Sass语言）时，若想在JavaScript中定义并使用变量，可以借助于`sass-resources-loader`插件。这个插件允许你在JavaScript文件中创建一个`scss`文件，并在其中声明变量。以下是基本步骤：

1. 安装插件：首先，在项目中安装`@vue/cli-plugin-sass`以及`sass-resources-loader`：

   npm install @vue/cli-plugin-sass sass-resources-loader --save-dev

2. 配置：在`.vuepress.config.js`（如果是在VuePress项目中）或`.vue/compiler-sfc`配置文件中添加`sass-resources-loader`配置：

   module.exports = {
     chainWebpack: config => {
       config.module
         .rule('scss-resources')
         .use('sass-resources-loader')
         .loader('sass-resources-loader')
         .options({
           resources: 'src/assets/scss/_variables.scss', // 这里是你的变量文件路径
         });
     },
   };

3. 在`_variables.scss`中定义变量：

   $primary-color: #007bff;

4. 在需要使用这些变量的地方引用它们：

   .my-component {
     color: $primary-color; // 在组件的样式中直接使用变量
   }

5. 使用`<style lang="scss">`标签引入SCSS文件到组件中，变量即可生效。