Проблема с sass-загрузчиком веб-пакета Vue.js с моим файлом .scss

Я использую пакеты style-loader, node-sass, sass-loader, как указано в документе. Я добавил в свой webpack.base.conf.js следующие модули правила

  {
    test: /\.(s?)css$/,
    use: ['style-loader','css-loader','sass-loader']
  },

В моем main.js я импортирую свои файлы .scss

 import 'element-ui/lib/theme-chalk/index.css' // Theme UI
import './assets/scss/index.scss' // Customize UI

но я получаю сообщение об ошибке на этапе сборки, когда загружается тема css, но затем

error  in ./src/assets/scss/index.scss
 Module build failed:
 @import './globals/index.scss';
 ^

Мне непонятно, как правильно обрабатывать файлы css и scss ... слишком много `` решений '' при поиске в Google ... не могу найти последний

обратная связь приветствуется


vue.js sass-loader webpack-3
person Community    schedule 02.04.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

РЕШЕНО .. (с использованием webpack 3.6.0

webpack.base.config.js

НЕТ необходимости в

{test: /.(s?)css$/, используйте: ['style-loader', 'css-loader', 'sass-loader']},

поэтому я удалил это

В utils.js у меня должен быть загрузчик css

exports.cssLoaders = function (options) {
  options = options || {}

  const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }

main.js удалил импорт ..

// import './element-ui/lib/theme-chalk/index.css' // Theme UI
// import './assets/scss/index.scss' // Customize UI

App.vue, вставлен @import ...

<style lang="scss">
@import "element-ui/lib/theme-chalk/index.css";
@import "./assets/scss/index.scss";
#app {

Следует позаботиться о вложенном @import .. в структуре assets / scss / ..

src
  assets
    scss
      globals
        index.scss
          // .border-black { border: 1px solid #000; }...
      mixins
        animations
            index.scss
              // ...
        breakpoints
            index.scss
              // ...
        buttons
            index.scss
              // ...
        tables
            index.scss
              // ... 
        transitions
            index.scss
              // ...
        index.scss
          // @import 'breakpoints/index.scss'; @import 'animations/index.scss'; @import 'buttons/index.scss'; @import 'tables/index.scss'; @import 'transitions/index.scss'; ...
      vars
        colors
            index.scss
                // $bg-white: #fff; $bg-white-light: #f5f5f5; $bg-black: #000; ...
        index.scss
            // @import 'colors/index.scss';
      index.scss
        // @import 'globals/index.scss'; @import 'mixins/index.scss'; @import 'vars/index.scss';
person Community    schedule 02.04.2018