Загрузка начальной загрузки / scss / mixins в Vue s css компонент - PullRequest
Новая
       38

Загрузка начальной загрузки / scss / mixins в Vue s css компонент

1 голос
/ 31 марта 2020

У меня есть приложение vue с компонентом, использующим s css. Я установил sass-загрузчик, и все это прекрасно работает - за исключением случаев, когда я пытаюсь импортировать bootstrap s css файлов.

Это специфический c импорт, который не выполняется: 

<style lang="scss">
@import url("~bootstrap/scss/mixins");
...

Я получаю следующую ошибку: 

This dependency was not found:

* -!../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!bootstrap/sc
ss/mixins in ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-load
er/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Home.vue?vue&type=style&index=0&lang=scss&

To install it, you can run: npm install --save -!../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loade
r/src/index.js??ref--8-oneOf-1-2!bootstrap/scss/mixins

Для сравнения, следующий импорт работает нормально: 

<style lang="scss">
@import url("~bootstrap/dist/css/bootstrap.css");
...

Из этого можно сделать вывод, что это не ссылка на NPM пакет, который сам по себе не работает. Похоже, это либо из-за: а) я не ссылаюсь на указанный файл c _mixins.s css правильно, либо б) мне нужно настроить загрузчик sass для возможности импорта файлов css из NPM пакетов.

У кого-нибудь есть идеи относительно того, что я делаю неправильно? Любой вклад приветствуется.

Ответы [ 2 ]

2 голосов
/ 31 марта 2020

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

Вы можете настроить sass-loader для добавления css или scss в каждый компонент. Это удобно, когда дело доходит до таких вещей, как mixins, functions и variables для S CSS.

Ниже я импортирую один файл с именем _theming.scss, этот файл импортирует Bootstraps mixins, variables и functions. Таким образом, я могу свободно использовать переменные Bootstrap, например, в моих компонентах, и если я сделаю какие-либо переопределения в файле _theming.scss, они также будут применены ко всему моему приложению.

vue .config. js (если этот файл не существует, создайте его в root вашего проекта, где package.json) 

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@/assets/scss/_theming.scss";`
      }
    }
  }
};

_theming. s css

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";

Примечание: Только помните, что не нужно помещать любые css, которые отображаются в файле, который вы используете, в prependData. Поскольку это добавит css к каждому имеющемуся у вас компоненту, даже если вы не используете css в компоненте, вы увеличите размер своего комплекта.

Например, если вы изменили файл _theming.scss до: 

.text-red {
  color: red;
}

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";

Все ваши компоненты внезапно будут содержать css: 

.text-red {
  color: red;
}
1 голос
/ 31 марта 2020

Вам не нужно использовать функцию URL.

Попробуйте что-то вроде этого: 

<style lang="scss">
@import '~bootstrap/scss/mixins';
<style>

Если вы хотите импортировать все модули из Bootstrap, вы можете сделать это так : 

<style lang="scss">
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins';

// Optional Modules
@import '~bootstrap/scss/root';
@import '~bootstrap/scss/reboot';
@import '~bootstrap/scss/type';
@import '~bootstrap/scss/images';
@import '~bootstrap/scss/code';
@import '~bootstrap/scss/grid';
@import '~bootstrap/scss/tables';
@import '~bootstrap/scss/forms';
@import '~bootstrap/scss/buttons';
@import '~bootstrap/scss/transitions';
@import '~bootstrap/scss/dropdown';
@import '~bootstrap/scss/button-group';
@import '~bootstrap/scss/input-group';
@import '~bootstrap/scss/custom-forms';
@import '~bootstrap/scss/nav';
@import '~bootstrap/scss/navbar';
@import '~bootstrap/scss/card';
@import '~bootstrap/scss/breadcrumb';
@import '~bootstrap/scss/pagination';
@import '~bootstrap/scss/badge';
@import '~bootstrap/scss/jumbotron';
@import '~bootstrap/scss/alert';
@import '~bootstrap/scss/progress';
@import '~bootstrap/scss/media';
@import '~bootstrap/scss/list-group';
@import '~bootstrap/scss/close';
@import '~bootstrap/scss/toasts';
@import '~bootstrap/scss/modal';
@import '~bootstrap/scss/tooltip';
@import '~bootstrap/scss/popover';
@import '~bootstrap/scss/carousel';
@import '~bootstrap/scss/spinners';
@import '~bootstrap/scss/utilities';
@import '~bootstrap/scss/print';
<style>
...