Как правильно импортировать внешние SCSS с помощью webpack и Vue.Яш?

как в Примере Material Component Web, я хочу иметь возможность импортировать SCSS из my node_modules такой:

@import '@material/elevation/mdc-elevation';

однако я получаю это сообщение об ошибке при попытке запустить сборку webpack:

File to import not found or unreadable: @material/elevation/mdc-elevation.

@import './~/@material/elevation/mdc-elevation.scss'; не работает.

Я уверен, что проблема где-то в моей конфигурации webpack, но я не могу понять, где.

что они сделали в Материальные Компоненты Web ' s Vue.Яш пример для того, чтобы заставить его работать?

вот мой npm-debug.log в случае, если вам это нужно. И вот соответствующий репозиторий Git: sk22/spg-tinf-sem03 / proj01

спасибо заранее!

Edit: я хочу иметь возможность импортировать scss файлы, а не скомпилированный css.

9
sass vue.js webpack

2 ответов

получил его.

вот часть моей конфигурации webpack 2 module.rules:

{
  test: /\.(sass|scss)$/,
  use: [
    'style-loader',
    'css-loader',
    {
      loader: 'sass-loader',
      options: {
        includePaths: [path.resolve(__dirname, 'node_modules')],
      },
    },
  ],
},

так что же я сделал не так? Мой options объект был помещен в правило напрямую, а не в загрузчик.

старое правило конфигурации webpack выглядело так:

{
  test: /\.(sass|scss)$/,
  use: ['style-loader', 'css-loader', 'sass-loader'],
  options: { includePaths: [path.resolve(__dirname, './node_modules')] },
},

видите разницу? Вместо строки "Sass-loader" я расширил ее до объекта, содержащего loader имя и по крайней мере с моей предыдущей конфигурации. Но это нарушит 3rd party SCSS фреймворки вроде Материальные Компоненты Web, потому что они используют @import заявления без ~ сами, например здесь.

внутри .файлы Vue

это не будет работать .файлы Vue, как vue-loader просто использует Sass-loader без каких-либо вариантов по умолчанию. Поэтому, если вы хотите, чтобы это работало, вам, вероятно, нужно использовать собственные параметры Vue-loader, как описано в его документация.

(Я не могу заставить его работать по какой-то причине я не знаю...)

9

EDIT: Webpack теперь имеет раздел на Sass-loader:https://webpack.js.org/loaders/sass-loader/ также упоминая includepaths.

у меня была такая же проблема с @material и Vue. Мне удалось решить проблему, не регулируя use собственность напрямую.

решение

Шаг 1: сначала создайте проект Vue 2.1 По умолчанию с помощью CLI. Ваша файловая структура будет иметь ./build справочник.

Шаг 2: откройте файл "utils" вы увидите cssLoaders() функция, которая возвращает объект / карту для языков vue-loader поддерживает.

вы увидите как sass и scss в этой карте.

Шаг 3: изменить значения sass и scss в:

  sass:    generateLoaders('sass', {
    indentedSyntax: true,
    includePaths:   [path.resolve(__dirname, '../node_modules')]
  }),
    scss:    generateLoaders('sass', {
  includePaths: [path.resolve(__dirname, '../node_modules')]
}),

Шаг 4: перейти на .файл Vue вы используете и изменить в своем <style> элемент либо sass или scss.

Шаг 5: после того, как вы это сделали, перейдите к терминалу/консоли и установите sass-loader С:

npm установить узел Sass-loader-Sass webpack --save-dev

Шаг 6: запустите npm run dev и это должно сработать.

почему это работает?

библиотеки

я покопался немного и оказалось Сасс-погрузчик использует node-sass который имеет некоторые параметры, такие какincludePaths упомянутая @22samuelk. IncludePaths сообщает node-sass или, скорее, базовую библиотеку LibSass включить файлы sass из этого каталога / пути.

Vue

параметры Sass-loader

по умолчанию Vue ожидает, что ваши активы будут в ваших проектах (поправьте меня, если я ошибаюсь). Однако вы можете использовать ~ чтобы указать, что вы хотите начать с корня ваших проектов, который будет выглядеть как ' ~ / node_modules / @material/smth / mdc-smth.scss.

теперь, если вы хотите, чтобы ваш Sass-loader использовал что-то другое, чем эти параметры, вам нужно явно сказать им.

отсюда path.resolve(__dirname, '../node_modules' С находится в ./build и вам нужно использовать абсолютный путь для sass-loader чтобы понять, где искать.

Vue-погрузчик config

это не совсем специфично для вопроса, но конфигурация Vue-loader определена в vue-loader.conf.js работает следующим образом:

он использует карту, возвращенные cssLoaders() для создания загрузчиков, ожидаемых webpack. Возвращенная карта ({key:value}) используется путем предоставления key в качестве расширения файла, используемого в test: для объекта loader. The value используется в качестве объекта loader. Который хотел бы, как это:

{
  test: /\.(key)$/,
    use: [
  {
    loader: '//ld//-loader',
    options: {
      /*Options passed to generateLoaders('//ld//', options)*/
    },
  },
],
}

здесь key является расширением файла. В этом случае это будет либо sass или scss. И //ld//это загрузчик, который вы используете. Который показан в Шаг 3 as 'sass'.

надеюсь, это прояснит некоторые вещи. Это заняло некоторое время, потому что я только начал использовать Vue.

6