如何将 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 中。在我的<style lang="scss" scoped>
我有@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 组件中?的主要内容,如果未能解决你的问题,请参考以下文章
ISO 通过 vue.config.js 链接 Webpack 以将全局 .scss 导入添加到我的 .vue 文件的正确方法(vue-cli-plugin-nativescript-vue)