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

Question

Я только начинаю с 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 

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

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

Answer 1

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

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

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

Answer 2

Мне удалось решить эту проблему самостоятельно. Вместо того, чтобы пытаться напрямую импортировать 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.

Answer 3

мне удалось работал это правильный путь, как это:

Vue:

<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