时间戳

首页 > 解决方案 > 如何将我的变量 SCSS 导入 Webpack 以供全球使用。(Vue)

vue.js - 如何将我的变量 SCSS 导入 Webpack 以供全球使用。(Vue)

问题描述

我想在我的代码中使用变量，但问题是如果不将 .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”文件。）

标签： vue.jswebpack

解决方案

正如我想象的那样，您正在使用 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

推荐阅读