Почему Webpack не понимает sass стили из компонента Vue.js?

Question

[krisdayer]

Есть стили Sass в компоненте Vue.js

<style lang="sass" scoped>
	.title
		font-size: 50px
		font-family: Arial
		font-weight: 500
		color: red
</style>

Часть кода из сборки

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const { VueLoaderPlugin } = require('vue-loader');

	module: {
		rules: [{
			test: /\.vue$/,
			loader: 'vue-loader',
			options: {
				loader: {
					sass: 'vue-style-loader!css-loader!sass-loader'
				}
			}
			},{
			test: /\.sass$/,
			use: [
				'style-loader',
				MiniCssExtractPlugin.loader,
				{
				loader: 'css-loader',
				options: { sourceMap: true }
				}, {
				loader: 'postcss-loader',
				options: { sourceMap: true, config: { path: './postcss.config.js' } }
				}, {
				loader: 'sass-loader',
				options: { sourceMap: true }
				}
				]
			}, {
			test: /\.css$/,
			use: [
				'style-loader',
				MiniCssExtractPlugin.loader,
				{
				loader: 'css-loader',
				options: { sourceMap: true }
				}, {
				loader: 'postcss-loader',
				options: { sourceMap: true, config: { path: `./postcss.config.js` } }
				}
				]
		}
		]
	},
	plugins: [
		new VueLoaderPlugin(),
		new MiniCssExtractPlugin({
			filename: `${PATHS.assets}css/[name].[hash].css`,
		}),
	]
}

postcss.config.js

module.exports = {
  plugins: [
    require('autoprefixer'),
    require('css-mqpacker'),
    require('cssnano')({
    preset: [
      'default', {
      discardComments: {
        removeAll: true,
      }
    }
    ]
  })
  ]
}

И сама ошибка:
SassError: Invalid CSS after "": expected 1 selector or at-rule, was ".title"
on line 1 of D:\Webpack-Template\src\components\posts.vue

Как я понял, он ожидает селектор или правило, а у меня ".title", что как я и прописал как селектор.

При этом если пишу код в стиле css, то всё работает:

.title {
		font-size: 50px;
		font-family: Arial;
		font-weight: 500;
		color: red;
	}

Comments

[Михаил]

лишний отступ от начала строки?

[krisdayer]

Михаил, проверял, не помогает

Answer 1

[Тигран Абрамян]

sass-loader не работает с версией 8.0.0. и vue cli 3.10.0

Как уже всем известно scss новая версия sass так что придется новую версию sass'a использовать.

Вы конечно можете попробовать исправить эту проблему вписывая в vue.config.js эту штуку.

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: ` @import '@/assets/sass/_theme.scss';`
      }
    }
  },
}

Или это.

Сначала все обновляем.

npm update -g @vue/cli
# OR
yarn global upgrade --latest @vue/cli

npm update sass-loader
# OR
yarn upgrade --latest sass-loader

module.exports = {
  css: {
    loaderOptions: {
      // old
      sass: {
        data: `@import "@/styles/_global.scss";`,
      },
      // new
      sass: {
        prependData: `@import "@/styles/_global.sass"`, // change to *.sass; remove semi-colon
      }, 
      scss: { // separate one for scss
        prependData: `@import "@/styles/_global.scss"`, // this is .scss
      }, 
    },
  },
  // ...
}

Или это.

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        sassOptions: {
          includePaths: [
            './node_modules'
          ]
        },
        prependData: `@import "@/styles/global.scss";`,
      },
    },
  },
};

Не забудьте проверять все это в vue.config.js.

Если не сработает, то как уже сказал

sass-loader не работает с версией 8.0.0. и vue cli 3.10.0

Comments

[WapSter]

Как уже всем известно scss новая версия sass

чего?)

[Александр Антонов]

WapSter, сам не понял