CODEWITHSUNDEEP
vue.jswebpack
KJParker
KJParker

Reputation: 780

How to import my Variables SCSS into Webpack for global use. (Vue)

I want to use variables within my code, but the issue is that I cannot use variables in each component without importing the .scss file into each component.

Someone mentioned that using Webpack may help, and would allow me to use the variables project-wide without individual imports.

The problem is, I have never messed with Webpack before and am not even sure where to import the scss file.

In Vue, I have my files "bundled" into one file (which I believe is the package.json).

My package.json file looks like this - 

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

Obviously, I cannot see any webpack there, so imagine I would need to add it? (or maybe somewhere else?) maybe someone can help? where would I import my "variables.scss" file.)

Upvotes: 0

Views: 1547

Answers (1)

peerbolte
peerbolte

Reputation: 1199

As I imagine you are using vue cli. You can create a file in your project folder called vue.config.js. Inside of that file you can define the following to load a scss file for each component (where your file is located in /styles/variables.scss):

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

You can read more about the vue.config.js file here: https://cli.vuejs.org/config/#css-loaderoptions

Upvotes: 1

Related Questions