Vuetify + webpack + rails изменить шрифт по умолчанию - PullRequest
Новая
       4

Vuetify + webpack + rails изменить шрифт по умолчанию

0 голосов
/ 27 марта 2020

Я плохо пытаюсь изменить vuetify с помощью пользовательского шрифта, у меня есть приложение rails 6 + webpack + vue и vuetify, я не уверен, что насчет моей проблемы:

this мои переменные. s css

@font-face {
  font-family: 'Sofia Pro';
  src: url('https://***.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: 'Sf pro text';
  src: url('https://***.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
}

$body-font-family: 'Sf pro text', serif;
$heading-font-family: 'Sofia Pro', serif;

@import '~vuetify/src/styles/main.sass';

, и это мое vuetify. js файл конфигурации: 

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css' 

import es from '../locale/es.ts'
import en from '../locale/en.ts'

import '../styles/variables.scss'

Vue.use(Vuetify)

....

, а это моя конфигурация веб-пакета: 

// webpack/loaders/vue.js ----------------

module.exports = {
  test: /\.vue(\.erb)?$/,
  use: [{
    loader: 'vue-loader'
  }],
    rules: [
      // SASS has different line endings than SCSS
      // and cannot use semicolons in the markup
      {
        test: /\.sass$/,
        use: [
          'vue-style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            // Requires sass-loader@^7.0.0
            options: {
              // This is the path to your variables
              data: "@import '@/styles/variables.scss'"
            },
            // Requires sass-loader@^8.0.0
            options: {
              // This is the path to your variables
              prependData: "@import '@/styles/variables.scss'"
            },
          },
        ],
      },
      // SCSS has different line endings than SASS
      // and needs a semicolon after the import.
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            // Requires sass-loader@^7.0.0
            options: {
              // This is the path to your variables
              data: "@import '@/styles/variables.scss';"
            },
            // Requires sass-loader@^8.0.0
            options: {
              // This is the path to your variables
              prependData: "@import '@/styles/variables.scss';"
            },
          },
        ],
      },
    ],
}

и это моя ошибка трассировки: 

ERROR in ./app/javascript/styles/variables.scss (./node_modules/css-loader/dist/cjs.js??ref--4-1!./node_modules/postcss-loader/src??ref--4-2!./node_modules/sass-loader/dist/cjs.js??ref--4-3!./app/javascript/styles/variables.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "    @content": expected "}", was "($material-light); "
        on line 3 of node_modules/vuetify/src/styles/tools/_theme.sass
        from line 6 of node_modules/vuetify/src/styles/tools/_index.sass
        from line 3 of node_modules/vuetify/src/styles/main.sass
        from line 4 of /app/javascript/styles/variables.scss
>>     @content($material-light); }

   ----^

SassError: SassError: Invalid CSS after "    @content": expected "}", was "($material-light); "
        on line 3 of node_modules/vuetify/src/styles/tools/_theme.sass
        from line 6 of node_modules/vuetify/src/styles/tools/_index.sass
        from line 3 of node_modules/vuetify/src/styles/main.sass
        from line 4 of /app/javascript/styles/variables.scss
>>     @content($material-light); }

   ----^

    at Object.render [as callback] (/node_modules/sass-loader/dist/index.js:73:16)
    at Object.done [as callback] (/node_modules/neo-async/async.js:8067:18)
    at options.error (/node_modules/node-sass/lib/index.js:294:32)

Какая-то идея, о том, что я делаю неправильно? Я пытался следовать этому ответу { ссылка }

...