如何将 scss 导入到我的 Vue 组件中?

Posted

技术标签:

【中文标题】如何将 scss 导入到我的 Vue 组件中?【英文标题】:How can I import scss into my Vue components? 【发布时间】:2020-05-06 17:11:42 【问题描述】:

我正在尝试将我的 app.scss 导入到我的 application.vue 中,但我不断收到无法识别别名 sass 的错误消息。我在网上查看了如何将别名添加到我的混合文件中,并且我有以下 webpack.mix.js。在我的 vue 组件中,我有以下代码

<style lang="scss">
    @import 'sass/app.scss';
    html, body
        margin: 0px;
        padding: 0px;
        background-color: $secondary-color;
    
</style>

在我的 webpack.mix.js 中

const mix = require('laravel-mix');

mix.webpackConfig(
   resolve: 
      alias: 
         '@': path.resolve(__dirname,'/resources/js'),
         'sass': path.resolve(__dirname, '/resources/assets/sass')
      ,
   ,
);

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

我尝试将别名更改为~,但这不起作用。我在这里做错了什么?

【问题讨论】:

这能回答你的问题吗? How do I add a global scss file in Vue.JS that will compile? 它对我不起作用。我将 scss 存储在 assets/scss/mixi.scss 中。在我的&lt;style lang="scss" scoped&gt;我有@import "./assets/scss/mixin";。当调用yarn serve我得到错误Syntax Error: SassError: Can't find stylesheet to import 显示路径@import "./assets/scss/mixin";。我正在使用 vue cli。 【参考方案1】:

只需按以下方式将 scss 文件导入所选组件中即可。这个对我有用。希望对你有帮助

<style lang="scss" scoped>
  @import "./path/app.scss"; //Here i add extra "./"(current directory)
</style>

【讨论】:

【参考方案2】:

我使用了两种不同的方法。

    使用style-resources-loader。

在你的vue.config.js


  //...
  pluginOptions: 
    'style-resources-loader': 
      preProcessor: 'scss',
      patterns: [resolve(__dirname, 'src/path/to/css/*.scss')],
    ,
  ,
  //...

    在您的main.js 文件中导入scss 文件,该文件类似于:import './styles/path/to/file/app.scss'; 作为文件顶部的 js 导入。

这两种方法都将在全局范围内有效地使用您的 scss 文件,而无需在每个单独的组件中导入。

【讨论】:

以上是关于如何将 scss 导入到我的 Vue 组件中?的主要内容,如果未能解决你的问题,请参考以下文章

如何将全局样式表导入组件 vue?

ISO 通过 vue.config.js 链接 Webpack 以将全局 .scss 导入添加到我的 .vue 文件的正确方法(vue-cli-plugin-nativescript-vue)

如何在 vue js 组件中使用 scss 文件?

2020年全球如何将scss文件添加到Vue项目

如何将axios全局导入vue.js项目[重复]

如何在 Vue Nuxt 项目中导入整个 SCSS 文件夹?