Как импортировать мои переменные SCSS в Webpack для глобального использования.(Вью)

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"
]
}

Очевидно, я не вижу там никакого веб-пакета, поэтому представьте, что мне нужно его добавить?(или может где-то еще?) может кто-то может помочь?куда мне импортировать файл "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