如何将我的Variables SCSS导入Webpack以供全局使用。 （Vue）

Question

我想在代码中使用变量，但是问题是，如果不将.scss文件导入到每个组件中，则无法在每个组件中使用变量。

有人提到使用Webpack可能会有所帮助，并使我可以在项目范围内使用变量而无需单独导入。

问题是，我以前从未对Webpack感到困惑，甚至不确定在哪里导入scss文件。

在Vue中，我将文件“捆绑”成一个文件（我相信是package.json）。

我的package.json文件如下所示-

{
"name": "freelance",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"vue": "^2.5.21",
"vue-router": "^3.0.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.3.0",
"@vue/cli-plugin-eslint": "^3.3.0",
"@vue/cli-service": "^3.3.0",
"babel-eslint": "^10.0.1",
"eslint": "^5.8.0",
"eslint-plugin-vue": "^5.0.0",
"node-sass": "^4.9.0",
"sass-loader": "^7.0.1",
"vue-template-compiler": "^2.5.21"
},
"eslintConfig": {
"root": true,
"env": {
  "node": true
},
"extends": [
  "plugin:vue/essential",
  "eslint:recommended"
],
"rules": {},
"parserOptions": {
  "parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
  "autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}

很显然，我在那里看不到任何Webpack，所以可以想象我需要添加它吗？ （或其他地方？）也许有人可以提供帮助？我将在哪里导入“ variables.scss”文件。）

Answer 1

我想您正在使用vue cli。您可以在项目文件夹中创建一个名为vue.config.js的文件。在该文件内，您可以定义以下内容以为每个组件加载一个scss文件（您的文件位于/styles/variables.scss中）：

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                data: '@import "@/styles/variables.scss";'
            }
        }
    }
};

您可以在此处了解有关vue.config.js文件的更多信息：https://cli.vuejs.org/config/#css-loaderoptions