How to use sass in VUE application?
Solution 1
You can use style-resources-loader
plugin like this in vue.config.js
file
vue.config.js
const path = require('path');
module.exports = {
...
pluginOptions: {
'style-resources-loader': {
preProcessor: 'scss',
// load which style file you want to import globally
patterns: [path.resolve(__dirname, './src/styles/_variables.scss')],
},
}
};
Edit: if this doesn't work, add this to your webpack.config module.rules array. It will tell webpack to use sass loader for your .scss
files
{
test: /\/.scss$/,
loaders: ['style', 'css', 'sass']
}
Solution 2
After a lot of searching and trying different solutions I have found this article and following it step by step has worked perfect for me. Only by installing the file-loader and adding the highlighted fields in the article to my webpack I have solved the problem.
I leave you the link in case someone is in the same situation.
https://chriscourses.com/blog/loading-fonts-webpack
Thank you for your help.
Related videos on Youtube
homerThinking
Updated on June 04, 2022Comments
-
homerThinking almost 2 years
I am developing my first application in VUE I have created a styles file at the root of the project and another with the fonts I want to use globally. I'm trying to modify the styles of the components to be able to declare "" and thus be able to use these styles globally. Following the official documentation and articles on the subject I do not see the solution to a bug that launches the console
"ERROR in ./node_modules/css-loader?sourceMap!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/dist/cjs.js!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue"
here is my vue.config.js
module.exports = { css: { loaderOptions: { sass: { prependData: `@import "@/styles/_variables.scss";` } } }, }
and here my webpack.config.js
var path = require('path') var webpack = require('webpack') module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, './dist'), publicPath: '/dist/', filename: 'build.js' }, module: { rules: [ { test: /\.css$/, use: [ 'vue-style-loader', 'css-loader', { loader: 'sass-loader', options: { prependData: `@import "@/styles/_variables.scss";` } } ], }, { test: /\.scss$/, use: [ 'vue-style-loader', 'css-loader', { loader: 'sass-loader', options: { // prependData: // `@import "@/styles/_variables.scss";` resources: [ path.resolve(__dirname, '../src/styles/_variables.scss') ] } } ], }, { test: /\.vue$/, loader: 'vue-loader', options: { loaders: { } // other vue-loader options go here } }, { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, { test: /\.(png|jpg|gif|svg)$/, loader: 'file-loader', options: { name: '[name].[ext]?[hash]' } } ] }, resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' }, extensions: ['*', '.js', '.vue', '.json'] }, devServer: { historyApiFallback: true, noInfo: true, overlay: true }, performance: { hints: false }, devtool: '#eval-source-map' } if (process.env.NODE_ENV === 'production') { module.exports.devtool = '#source-map' // http://vue-loader.vuejs.org/en/workflow/production.html module.exports.plugins = (module.exports.plugins || []).concat([ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"' } }), new webpack.optimize.UglifyJsPlugin({ sourceMap: true, compress: { warnings: false } }), new webpack.LoaderOptionsPlugin({ minimize: true }) ]) }
and here my App.vue
<template> <div id="app"> <div class="container"> <ciev-app-header /> <router-view></router-view> <hr> <ciev-app-footer></ciev-app-footer> </div> </div> </template> <script> import Header from './components/Shared/Header'; import Footer from './components/Shared/Footer.vue'; export default { name: 'app', components:{ 'ciev-app-header': Header, 'ciev-app-footer': Footer }, created () { this.$store.dispatch('tryAutoLogin') } } </script> <style lang="scss"> @font-face { font-family: 'RalewayRegular'; src: local('RalewayRegular'), url(./fonts/Raleway-Regular.ttf) format('truetype'); font-style: normal; } body, html { margin: 0; font-family: 'RalewayRegular', sans-serif; } </style>
Someone who can tell me what I'm doing wrong. Thank you in advance for your time and help.
my package.json
{ "name": "vue-cli", "description": "A Vue.js project", "version": "1.0.0", "author": "Miguel Alvarez Gomez <[email protected]>", "license": "MIT", "private": true, "scripts": { "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" }, "dependencies": { "axios": "^0.19.2", "style-resources-loader": "^1.3.3", "vue": "^2.5.11", "vue-router": "^3.3.4", "vuex": "^3.5.1" }, "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ], "devDependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-preset-env": "^1.6.0", "babel-preset-stage-3": "^6.24.1", "cross-env": "^5.0.5", "css-loader": "^0.28.7", "file-loader": "^1.1.4", "node-sass": "^4.14.1", "sass-loader": "^9.0.3", "vue-loader": "^13.0.5", "vue-template-compiler": "^2.4.4", "webpack": "^3.6.0", "webpack-dev-server": "^2.9.1" } }
-
tony19 over 3 yearsIt doesn't look like you're actually using a Vue CLI project (based on your
package.json
). I highly recommend using Vue CLI to generate your project. Then, enabling Sass would be as simple as installingnode-sass
andsass-loader
, and then using<style lang="scss">
in your SFCs.
-
-
homerThinking almost 4 yearsthank you for your time, but it's not working, and don't know why. Thows the same error
-
onuriltan almost 4 yearscan you retry by installing
node-sass
andsass-loader
-
homerThinking almost 4 yearsdone it, but still the same error "ERROR in ./node_modules/css-loader?sourceMap!./node_modules/vue-loader/lib/style-compiler?"
-
homerThinking almost 4 yearsNow the main problem is that I can't find another way to use fonts I have saved in my project.
-
onuriltan almost 4 yearsTry installing
vue-style-loader
andcss-loader
as well? -
homerThinking almost 4 yearsalso installed and keeps throwing the same error, I modified my vue.config .. const path = require('path'); module.exports = { pluginOptions: { 'style-resources-loader': { preProcessor: 'scss', // load which style file you want to import globally patterns: [path.resolve(__dirname, './src/styles/_variables.scss')] } } }
-
onuriltan almost 4 yearsCan you add
package.json
your to the question as well? -
homerThinking over 3 yearsadded the package json to the original question, thank you!
-
onuriltan over 3 yearsInstall
vue-style-loader
, if that does not work I might need to look at the whole project repo :) -
homerThinking over 3 yearsinstalled and still not working.... I haven't uploaded to any repository, if you would please take a look at it... how would you like to try it out?
-
onuriltan over 3 yearsDid this solve the problem? Because you accepted it
-
homerThinking over 3 yearssomething like that. I found the following article and combined with your answer I managed to fix it. Your help was what determined that I wouldn't restart the project