How can I use scss files and fonts in Vue project

Question

I created new project with vue-cli and I want to use global scss files in my projects to apply global styles. Also I want to use font-families without importing scss file in every component where I want to use it

I found lots of solutions, but none of them help me. I'm new with webpack, so it is hard to understand what exactly goes wrong. I install loader npm install sass-loader node-sass --save-dev and try to do lots of things with webpack

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'
        ],
      },
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ],
      },
      {
        test: /\.sass$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader?indentedSyntax'
        ],
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
            // the "scss" and "sass" values for the lang attribute to the right configs here.
            // other preprocessors should work out of the box, no loader config like this necessary.
            'scss': [
              'vue-style-loader',
              'css-loader',
              'sass-loader'
            ],
            'sass': [
              'vue-style-loader',
              'css-loader',
              'sass-loader?indentedSyntax'
            ]
          }
          // 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
    })
  ])
}

src/assets/scss/fonts.scss

@font-face {
  font-family: "SuisseIntl";
  src: url("../fonts/SuisseIntl.woff") format("woff");
}
@font-face {
  font-family: "SuisseIntl-Light";
  src: url("../fonts/SuisseIntl-Light.woff") format("woff");
}
@font-face {
  font-family: "SuisseIntl-SemiBold";
  src: url("../fonts/SuisseIntl-SemiBold.woff") format("woff");
}

$body-bg: red;

I want to be able to use font families in style tag inside every component and I want to be able to import scss files to component like this@import '../assets/scss/fonts'; , but now this cause error. Can someone help me, please? What should I do to make it work?

Answer 1

vue3 (no idea about vue2)

Late but I maybe still a help for someone.

I assume you have a working vue app already. I normaly create mine with vue ui or cli and use typescript. Many things are preconfigured then. Folder structure looks like this:

/node_modules
/public
/src
  /assets
  /components
  /...
/tests
...
package.json
...
 

1. create a vue.config.js (if not exists) in the root (where package.json lies) and put this into it:

module.exports = {
  css:        {
    loaderOptions: {
      sass: {
        // Or wherever your scss files are. I have a "style.scss" which imports all the others
        // @ in my case points to src/* and is defined in tsconfig.json. Substitute it with src should do fine
        prependData: `
        @import "@/assets/scss/style.scss";
        `,
      },
    },
  },
};

2. (optional) put your fonts into (if you want them deliver by yourself)

/assets/fonts/

3. load your fonts in the style.scss (example)

/* local path, dont forget that ~@/ in the url */
@font-face {
    font-family : 'Raleway';
    font-style  : normal;
    src         : url('~@/assets/fonts/Raleway-VariableFont_wght.ttf') format('truetype-variations')
}

/* or from google fronts */
@import url(http://fonts.googleapis.com/css?family=Roboto+Slab|Open+Sans:400italic,700italic,400,700);

4. Double check the font path in the scss file. Vue looks into /src folder. So the rootpath for sass-compiler is inside the src folder and the font-url has to start with ~@/assets/fonts/

Answer 2

To use scss in components, make sure you have both sass-loader and node-sass installed as dev dependencies. This will allow you to use scss styling in components with:

<style lang="scss">
</style>

If you want to include some actual styling (something like your fonts that creates actual styling lines in css), create a scss file and include it in your top-most Vue file (by default something like App.vue).

@import "./some/relative/path/to/your/scss/file.scss";

If you want to include variables, functions or mixins in every component without explicitly having to define the import, make a scss file that serves as your entry point for such configuration, e.g. /scss/config.scss. Make sure that you do not output ANY css rules in this file, because these css rules would be duplicated many times for each component. Instead use the file I mentioned before and import your configuration in there as well.

Then, go to your vue.config.js file and add the following to the object:

  css: {
    loaderOptions: {
      sass: {
        data: `
          @import "@/scss/config.scss";
        `
      }
    }
  }

This will automatically load the config file. If you are still using the old structure, you can get the same behaviour by adding a data option to your own sass-loader:

  {
    test: /\.scss$/,
    use: [
      'vue-style-loader',
      'css-loader',
      {
        loader: 'sass-loader',
        options: {
          data: '@import "config";',
          includePaths: [
            path.join(__dirname, 'src/scss') // Or however else you get to your scss folder
          ]
        }
      }
    ],
  },

Answer 3

Here is an example that works for me on the latest version of Vue-CLI (@vue/cli 5.0.0-rc.2, vue3) + TS + dart-sass:

1. I saved my fonts to the assets folder (src/assets/fonts/public-sans-vf.woff2);

2. Then I created the _fonts.css file in which I describe the rule for the font (src/assets/scss/_fonts.scss);

    @font-face {
      font-family: "Public Sans";
      src: url("~@/assets/fonts/public-sans-vf.woff2")
          format("woff2 supports variations"),
        url("~@/assets/fonts/public-sans-vf.woff2") format("woff2-variations");
   
      font-style: normal;
      font-weight: 400;
      font-display: swap;
   

   }

3. And then I configure the fonts in vue.config.ts

const { defineConfig } = require('@vue/cli-service');

module.exports = defineConfig({
  transpileDependencies: true,
  css: {
    loaderOptions: {
      scss: {
        additionalData: `
        @import "@/assets/scss/_variables.scss";
        @import "@/assets/scss/_fonts.scss";
        `,
      },
    },
  },
});