Nano Hash - криптовалюты, майнинг, программирование

Как импортировать всю папку SCSS в проект Vue Nuxt?

В моей компании мы не пишем CSS в файлах Vue, мы предпочитаем делать это старым способом с SCSS.

Проблема в том, что нам приходится писать новый импорт в styles.scss каждый раз, когда мы создаем новый компонент, и это действительно мешает мне в больших проектах.

Не так давно, когда я занимался разработкой в ​​React, я импортировал модуль с именем node-sass-glob-importer в webpack.config файл, немного подправил (вы можете проверить здесь), и это сработало - я мог бы импортировать такую ​​папку: @import "components/**";

В Nuxt у меня есть только nuxt.config.js файл, и я немного заблудился. Я знаю, как расширить там некоторые простые вещи, но это кажется более сложным.

Любая помощь в импорте node-sass-glob-importer или выполнении того же самого другим способом?

webpack vue.js nuxt.js sass
07.05.2019

Ответы:


1

как насчет использования https://github.com/nuxt-community/style-resources-module и чем:

export default {
  modules: ['@nuxtjs/style-resources'],
  styleResources: {
    scss: [
      './assets/yourFolder/*.scss'
    ]
  }
}
07.05.2019
  • Спасибо, работает даже для внешних модулей из node_modules. :) Мне только интересно. Мне все еще нужен css: ['~/assets/style/style.scss'],, чтобы это работало, но почему? Этот файл теперь пуст, так как я переместил весь свой импорт в nuxt.config.js. 08.05.2019
  • Теперь я понял, что каждый раз, когда я создаю новый файл scss, мне нужно вручную перезапускать сервер, потому что он не обновляется сам по себе. На данный момент это только обратная сторона, хотелось бы мне как-то принудительно перезагружать серверы, когда я создаю новый файл, так же, как это происходит, когда я что-то меняю в nuxt.config.js 08.05.2019
  • Проверьте предупреждение github.com/nuxt-community/style-resources-module# предупреждение - вы неправильно используете модуль, если используете его для стилей 10.06.2021

    • 2

    Вы можете использовать node-sass-glob-importer в Nuxt следующим образом:

    nuxt.config.js:

    const globImporter = require('node-sass-glob-importer');

export default {
  ...
  css: [
    '~/assets/scss/global.scss'
  ],
  ...
  build: {
    extend(config, {loaders: {scss}}) {
      const sassOptions = scss.sassOptions || {};
      sassOptions.importer = globImporter();
      scss.sassOptions = sassOptions;
    }
  }
}

    global.scss:

    @import "./assets/scss/base/*";
@import "./assets/scss/components/*";

    styleResources используется для таких вещей, как переменные, миксины и функции, которые вы хотите использовать в любом месте вашего SCSS без необходимости импортировать файлы.

    03.01.2021
    Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..