主页 / 问题 / 981353
Accepted
Nulliza
Asked:2020-05-14 22:53:47 +0000 UTC2020-05-14 22:53:47 +0000 UTC

将多个 scss 文件连接到 vue cli 启动模板

  • 772

我有几个 scss 文件，其中包含项目的 mixins 和其他设置。我需要将它们连接到 vue cli 启动模板。我怎样才能做到这一点？我需要在整个 Web 应用程序中传播这些 mixin 和初始设置（如 font-face）。我使用 webpack 构建。

webpack

1 个回答

  1. Best Answer

    我们需要做的第一件事是安装一些依赖项，运行命令：如果您使用的是 NPM：

    npm install sass-loader node-sass style-loader --save-dev

    如果使用纱线：

    yarn add sass-loader node-sass style-loader

    接下来，您需要将以下设置添加到 Webpack，这些行本身位于“build/webpack.base.conf.js”文件中。

    重要的！我注意到我们的 SCSS 文件位于“src/assets/scss”中。

       resolve: {
     extensions: ['.js', '.vue', '.json', '.scss'],
     alias: {
       'vue$': 'vue/dist/vue.esm.js',
       '@': resolve('src'),
       styles: resolve('src/assets/scss')
     }

}

    现在您可以在您的项目中使用 SCSS，为此您需要将不棘手的选项 lang = “scss” 添加到带有样式的部分，如下所示：

    <style lang="scss" scoped>

</style>

    为了导入 .scss 文件，您需要编写“@import”，例如：

    <style lang="scss" scoped>
 @import '../assets/scss/main';
</style>

    消息人士本人不止一次使用过这种方法。

    • 1

相关问题