Vue.js + Webpack + vue-loader + bootstrap-sass + sass-loader

Я только начинаю работу с Vue.js + Webpack + vue-loader + bootstrap-sass + sass-loader, и я немного потерялся.

Что я хотел бы сделать, так это использовать версию bootstrap SASS с моим кодом SPA Vue.js. Я хочу сделать это, чтобы мои настройки бутстрапа можно было сделать с помощью SASS. Вот что я сделал:

  • Создал новый проект Vue.js + webpack с vue-cli.
  • Установлен бутстрап-сасс и загрузчик.

  • Для сборки /webpack.base.conf.js добавлено следующее:

    { test: /\.scss$/, loaders: [ 'style', 'css', 'sass' ] },
{ test: /\.(woff2?|ttf|eot|svg)$/, loader: 'url', query: { limit: 10000 } }

  • Создан src/style.scss с одной строкой: @import 'bootstrap';

  • Добавлена ​​эта строка в начало src/main.js: import './style.scss'

Когда я теперь запускаю npm run dev, я получаю следующую ошибку:

ERROR in ./src/main.js
Module not found: Error: Cannot resolve module 'style' in  Users/rstuart/Workspace/javascript/kapiche-demo/src
@ ./src/main.js 3:0-25

Я не уверен, почему это не работает.

Также, связанный с этим вопросом, как мне получить доступ к переменным САПР начальной загрузки внутри моих компонентов Vue? Если я понимаю, что здесь происходит, SASS будет скомпилирован в CSS, прежде чем будет включен inline в main.js, то есть нет доступа к каким-либо переменным Bootstrap в моих компонентах. Есть ли способ достичь этого?

Ответы

Ответ 1

Мне удалось решить эту проблему самостоятельно. Вместо того, чтобы пытаться напрямую импортировать style.scss, я полностью удалил файл, и я заменил элемент <style> App.vue следующим образом:

  <style lang="sass">
    $icon-font-path: "../node_modules/bootstrap-sass/assets/fonts/bootstrap/";
    @import '../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap';

    .wrapper {
      margin-top: $navbar-height;
    }
  </style>

Это добавляет бонуса к тому, что переменные Bootstrap доступны в блоке стилей компонентов Vue. Кроме того, я полностью удалил { test: /\.scss$/, loaders: [ 'style', 'css', 'sass' ] } из webpacker.base.conf.js, но сохранил бит, относящийся к шрифтам. Загрузчик для файлов .vue уже имеет дело с sass.

Ответ 2

Мне удалось найти подходящий способ:

Вю:

<style lang="sass">
    $icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
    @import "~bootstrap-sass/assets/stylesheets/bootstrap";
</style>

загрузчик конфигурации webpack:

    {
      test: /\.(png|jpg|gif|svg)$/,
      loader: 'file-loader',
      options: {
        name: '[name].[ext]?[hash]'
      }
    },
    { 
      test: /\.scss$/, 
      loaders: [ 'style-loader', 'css-loader', 'sass-loader' ] 
    },
    { 
      test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
      loader: "url-loader?limit=10000&minetype=application/font-woff" 
    },
    { 
      test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
      loader: "file-loader" 
    }

Обратите внимание, что я использую bootstrap-sass, а не по умолчанию boostrap

Ответ 3

Он пытается разрешить модуль style, указанный вами как загрузчик в этом разделе вашего webpack.base.conf.js:

{ test: /\.scss$/, loaders: [ **'style'**, 'css', 'sass' ] }

Учитывая, что у вас есть css и sass loader, это, вероятно, ошибочная запись, которую вы можете удалить, чтобы начать работу.