Как я могу использовать scss-файлы и шрифты в проекте Vue

ProgramBox

Как я могу использовать scss-файлы и шрифты в проекте Vue

Post author:admin
Запись опубликована:9 мая, 2023
Post category:Вопросы по программированию

#javascript #vue.js #webpack

Вопрос:

Я создал новый проект с помощью vue-cli и хочу использовать глобальные scss-файлы в своих проектах для применения глобальных стилей. Также я хочу использовать семейства шрифтов без импорта файла scss в каждый компонент, где я хочу его использовать

Я нашел множество решений, но ни одно из них мне не помогло. Я новичок в webpack, поэтому трудно понять, что именно идет не так. Я устанавливаю loader npm install sass-loader node-sass --save-dev и пытаюсь многое сделать с помощью 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;

Я хочу иметь возможность использовать семейства шрифтов в теге style внутри каждого компонента, и я хочу иметь возможность импортировать файлы scss в компонент, подобный этому @import '../assets/scss/fonts'; , но теперь это вызывает ошибку.
Кто-нибудь может мне помочь, пожалуйста? Что я должен сделать, чтобы это заработало?

Ответ №1:

vue3 (понятия не имею о vue2)

Поздно, но я, возможно, все еще могу кому-то помочь.

Я предполагаю, что у вас уже есть работающее приложение vue. Обычно я создаю свой с помощью vue ui или cli и использую typescript. Тогда многие вещи предварительно настраиваются. Структура папок выглядит следующим образом:

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

создайте vue.config.js (если не существует) в корневом каталоге (где находится package.json) и поместите в него это:

 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";
        `,
      },
    },
  },
};

(необязательно) поместите ваши шрифты в (если вы хотите, чтобы они доставлялись самостоятельно)

 /assets/fonts/

загрузите свои шрифты в style.scss (пример)

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

Дважды проверьте путь к шрифту в файле scss. Vue просматривает папку /src. Итак, корневой путь для sass-compiler находится внутри папки src, и URL-адрес шрифта должен начинаться с ~@/assets/fonts/

Ответ №2:

Чтобы использовать scss в компонентах, убедитесь, что у вас есть оба, sass-loader и node-sass установленные как зависимости разработчика. Это позволит вам использовать scss-стиль в компонентах с:

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

Если вы хотите включить некоторый фактический стиль (что-то вроде ваших шрифтов, которые создают фактические линии стиля в css), создайте scss-файл и включите его в ваш самый верхний файл Vue (по умолчанию что-то вроде App.vue ).

@импортировать «./некоторый/ относительный/ путь / к / вашему / scss / файлу.scss»;

Если вы хотите включить переменные, функции или микшины в каждый компонент без явного определения импорта, создайте scss-файл, который служит точкой входа для такой конфигурации, например /scss/config.scss . Убедитесь, что вы не выводите НИКАКИХ правил css в этом файле, потому что эти правила css будут дублироваться много раз для каждого компонента. Вместо этого используйте файл, о котором я упоминал ранее, и импортируйте туда свою конфигурацию.

Затем перейдите к вашему vue.config.js файлу и добавьте к объекту следующее:

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

Это автоматически загрузит файл конфигурации. Если вы все еще используете старую структуру, вы можете добиться такого же поведения, добавив data опцию в свой собственный загрузчик sass:

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

Ответ №3:

Вот пример, который работает для меня в последней версии Vue-CLI (@vue / cli 5.0.0-rc.2, vue3) TS dart-sass:

Я сохранил свои шрифты в папке assets (src / assets / fonts / public-sans-vf.woff2);

Затем я создал файл _fonts.css, в котором я описываю правило для шрифта (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;

}

И затем я настраиваю шрифты в vue.config.ts

const { defineConfig } = требовать (‘@vue / cli-service’);

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