Как я могу импортировать s css в мои Vue компоненты? - PullRequest
Новая
       67

Как я могу импортировать s css в мои Vue компоненты?

0 голосов
/ 20 января 2020

Я пытаюсь импортировать мое приложение.s css в мое приложение. vue, но я получаю сообщение об ошибке, что псевдоним sass не распознается. Я посмотрел в Интернете, как добавить псевдоним в мой файл микса, и у меня есть следующий webpack.mix. js. В моем vue компоненте у меня есть следующий код 

<style lang="scss">
    @import 'sass/app.scss';
    html, body{
        margin: 0px;
        padding: 0px;
        background-color: $secondary-color;
    }
</style>

И в моем webpack.mix. js

const mix = require('laravel-mix');

mix.webpackConfig({
   resolve: {
      alias: {
         '@': path.resolve(__dirname,'/resources/js'),
         'sass': path.resolve(__dirname, '/resources/assets/sass')
      },
   },
});

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

Я попытался изменить псевдоним на ~, но это не сработало. Что я тут не так делаю?

1 Ответ

0 голосов
/ 20 января 2020

Я использовал 2 отдельных подхода.

  1. Использование style-resources-loader .

В вашем vue.config.js: 

{
  //...
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'scss',
      patterns: [resolve(__dirname, 'src/path/to/css/*.scss')],
    },
  },
  //...
}
Импорт файлов scss в файл main.js, который выглядит примерно так: import './styles/path/to/file/app.scss'; как js импорт в верхней части файла.

Оба эти подходы будут эффективно использовать ваш файл scss в глобальном масштабе без импорта в каждый отдельный компонент.

...