Почему я не могу скомпилировать 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'], как настроено в модулях.

Что я делаю неправильно?

Спасибо!

РЕДАКТИРОВАТЬ: Ссылка на полный пример проекта: https://dl.dropboxusercontent.com/u/1066659/dummy.zip


person PedroD    schedule 04.05.2016    source источник
comment
require('./styles/main.scss') не следует использовать тег <script>. вместо этого он должен быть внутри <style lang="sass"></style> с использованием синтаксиса импорта sass.   -  person Raj Kamal    schedule 04.05.2016
comment
Компилирую сейчас без ошибок. Однако CSS не отображается на результирующей странице (т.е. не включается в html).   -  person PedroD    schedule 04.05.2016
comment
Я добавил ссылку на полный проект.   -  person PedroD    schedule 04.05.2016


Ответы (1)


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

(См. projectRoot/build/utils.js строки с ~ 10 по ~ 50)

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

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

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

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

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

ПРИМЕЧАНИЕ. Вы ДОЛЖНЫ использовать scss вместо sass, поскольку sass попытается проанализировать вашу таблицу стилей, используя синтаксис с отступом вместо синтаксиса скобок.

1:

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

2:

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

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

person Taylor Glaeser    schedule 05.05.2016
comment
Краткое добавление к последнему абзацу: вы можете использовать несколько тегов <style> в компоненте .vue, поэтому, хотя вы не можете добавлять какие-либо правила CSS к тегу с атрибутом src, вы можете добавить второй тег и поместить их туда. - person Linus Borg; 06.05.2016
comment
Ты спас мне день! - person Przemek Nowak; 16.01.2018
comment
Что, если я хочу импортировать файл scss в файл JS? - person van_folmert; 07.03.2018
comment
@TaylorGlaeser - вы имеете в виду, что Vue пытается определить загрузчики, или вы имеете в виду Vue-cli? - person Jamie Marshall; 03.03.2021