Question

我在尝试使用自定义字体更改vuetify时遇到了麻烦，我有Rails 6应用程序+ webpack + vue和vuetify，我不确定我的问题是什么

这是我的variables.scss

@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配置：

// 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)

有些想法，关于我做错了什么？我尝试遵循此答案https://stackoverflow.com/a/45745855/1535228

Vuetify + Webpack + Rails更改默认字体

0 个答案: