Почему я не могу скомпилировать SASS с помощью Webpack?

у меня есть следующие модули в моей конфигурации Webpack:

module: {
    preLoaders: [
      {
        test: /.vue$/,
        loader: 'eslint',
        include: projectRoot,
        exclude: /node_modules/
      },
      {
        test: /.js$/,
        loader: 'eslint',
        include: projectRoot,
        exclude: /node_modules/
      }
    ],
    loaders: [
      {
        test: /.vue$/,
        loader: 'vue'
      },
      {
        test: /.js$/,
        loader: 'babel',
        include: projectRoot,
        exclude: /node_modules/
      },
      {
        test: /.json$/,
        loader: 'json'
      },
      {
        test: /.html$/,
        loader: 'vue-html'
      },
      {
        test: /.(png|jpe?g|gif|svg)(?.*)?$/,
        loader: 'url',
        query: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /.scss$/,
        loaders: ['style', 'css', 'sass']
      },
      {
        test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
        loader: 'url',
        query: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  },

вы можете видеть, что я использую Sass-loader и для *.SCSS-файлы я определяю этот конвейер:['style', 'css', 'sass'].

тогда у меня есть файл scss:

html {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

(...)

наконец, у меня есть моя HTML-страница (в файле VUE из vue.js), который импортирует этот файл scss:

<script>

require('./styles/main.scss')

(...)

</script>

но почему я получаю эту ошибку при запуске проекта:

ERROR in ./~/css-loader!./~/sass-loader!./~/style-loader!./~/css-loader!./~/sass-loader!./src/styles/main.scss
Module build failed:
html {
^
      Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi"
      in /Users/td/uprank/src/styles/main.scss (line 1, column 1)
 @ ./src/styles/main.scss 4:14-247 13:2-17:4 14:20-253

почему он получает трубопровод неправильный? (Похоже, webpack пытается обработать ['css', 'sass', 'style', 'css', 'sass'] вместо ['style', 'css', 'sass'] как настроить в модулях.

что я делаю не так?

спасибо!

EDIT: ссылка на полный пример проекта:https://dl.dropboxusercontent.com/u/1066659/dummy.zip

22
sass-loader vue.js webpack webpack-dev-server webpack-style-loader

1 ответов

это происходит потому, что Vue автоматически генерирует конфигурации загрузчика для CSS, SASS/SCSS, Stylus.

(см. projectRoot/build/utils.js линии ~10 до ~50)

таким образом, вы видите ошибку, потому что у вас есть загрузчик webpack, который пытается импортировать файл, а затем Vue пытается импортировать (уже загруженный) файл. Таким образом, вы можете думать о вашей цепи погрузчика как sass -> css -> style -> sass -> css -> vue-style

для того чтобы решить эту проблему вы должны избавиться от загрузчика что вы добавили:

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

и просто положитесь на предоставленный загрузчик.

вы можете загрузить таблицу стилей одним из двух способов:

Примечание:должны использовать scss вместо sass, as sass попытается проанализировать таблицу стилей, используя синтаксис с отступом вместо синтаксиса скобок.

1:

<style lang="scss">
  @import './styles/main.scss
</style>

2:

<style src="./styles/main.scss"></style>

оба из них импортируют таблицу стилей, последняя просто предотвращает добавление каких-либо дополнительных стилей в компонент.

29