laravel 在 VueJS 组件中使用 sass 变量
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35580710/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using sass variables in a VueJS component
提问by Nicklas Kevin Frank
I got a rather simple problem with a VueJS component that needs to use a variable. The problem comes with getting sass to register variables inside a component.
我在需要使用变量的 VueJS 组件上遇到了一个相当简单的问题。问题在于让 sass 在组件内注册变量。
I tried importing the _variables.scssfile containing my variables but to no luck. At this point any guidance is very much appreciated, or if there is another way for a component to inherit styling.
我尝试导入_variables.scss包含我的变量的文件，但没有成功。在这一点上，非常感谢任何指导，或者组件是否有另一种方式来继承样式。
MyComponent.vue
我的组件.vue
<template>
<div class="my-color"></div>
</template>
<style lang="sass">
.my-color {
color: $primary-color;
}
</style>
<script>
export default{
data(){
return {}
}
}
</script>
Gulpfile.js
Gulpfile.js
var elixir = require('laravel-elixir');
require('laravel-elixir-vueify');
elixir(function(mix) {
mix.browserify('main.js');
mix.sass('app.scss');
});
app.scss
应用程序.scss
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
@import "modules/variables";
variables.scss
变量.scss
$primary-color: #BA2731; //Red
回答by nils
Importing the _variables.scssin every component seems to be the only solution I've found so far (it should work, according to this issue).
_variables.scss到目前为止，在每个组件中导入似乎是我找到的唯一解决方案（根据此问题，它应该可以工作）。
<template>
<div class="my-color"></div>
</template>
<style lang="sass">
@import 'path/to/your/_variable.scss'; // Using this should get you the variables
.my-color {
color: $primary-color;
}
</style>
<script>
export default{
data(){
return {}
}
}
</script>
As you are only going to include variables, this shouldn't be a problem.
由于您只会包含变量，因此这应该不是问题。
But as mentioned in the issue, a word of caution: You should only include abstract entities (variables, extends, mixins) into every component, no concrete CSS rules.
但正如问题中提到的，有一个警告：你应该只在每个组件中包含抽象实体（变量、扩展、混合），没有具体的 CSS 规则。
回答by user2718281
Assuming you are using vue-cli, try this.
假设你正在使用vue-cli，试试这个。
If you don't already have the sass loader installed:
如果您还没有安装 sass 加载器：
npm install -D sass-loader node-sass
Then in vue.config.js:
然后在vue.config.js：
const path = require('path');
module.exports = {
css: {
loaderOptions: {
sass: {
data: `@import "@/pathto/variables.scss";`
}
}
}
};
In your component:
在您的组件中：
<style lang="sass">
.my-color {
color: $primary-color;
}
</style>
Source:
来源：
Passing options to pre-processor loaders
How to import a sass file into every vue component
Edit:
编辑：
As of sass-loader 8, dataneeds to be prependData(Thanks to @ben-y for pointing this out):
从 sass-loader 8 开始，data需要是prependData（感谢@ben-y 指出这一点）：
const path = require('path');
module.exports = {
css: {
loaderOptions: {
sass: {
prependData: `@import "@/pathto/variables.scss";`
}
}
}
};
回答by Gene Parcellano
For my project I used Vue CLI webpackand here's a solution that worked for me.
对于我的项目，我使用了Vue CLI webpack，这是一个对我有用的解决方案。
I manage all of my SCSS in the App.vuefile. In each of my Component.vueI stopped using <style></style>and started creating a separate component.scss.
我在App.vue文件中管理我所有的 SCSS 。在我的每一个中，我Component.vue停止使用<style></style>并开始创建一个单独的component.scss.
So my srcfolder looks like:
所以我的src文件夹看起来像：
/src
/assets
/components
/compA
CompA.vue
compA.scss
/compB
CompB.vue
compB.scss
App.vue
main.js
And my App.vuelooks like
我的App.vue样子
<template> ... </template>
<script> ... </script>
<style lang="less">
//Bootstrap
@import "../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
//Components
@import "components/compA.scss";
@import "components/compB.scss";
</style>
The advantage of this setup is getting to manage all your styles in one location, and also being able to use all your bootstrap variables and mixins.
这种设置的优点是可以在一个位置管理所有样式，并且还能够使用所有引导变量和混合。
I went this route since when I import the Boostrap SCSS in all of my components, the size of my app kept growing. The increase is negligible if I'm only importing the variables, but when I import the whole Boostrap SCSS the increase becomes significant. I do this so I can use the mixins and extend some existing styles.
我走这条路是因为当我在所有组件中导入 Boostrap SCSS 时，我的应用程序的大小一直在增长。如果我只导入变量，则增加可以忽略不计，但是当我导入整个 Boostrap SCSS 时，增加变得显着。我这样做是为了可以使用 mixin 并扩展一些现有的样式。
