@krisdayer

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

Есть стили 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;
	}
  • Вопрос задан
  • 111 просмотров
Решения вопроса 1
TAbrahamyan
@TAbrahamyan
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
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы