Я не могу загрузить конфигурационный файл scss в vuejs с помощью sass-resources-loader

Question

webpack.base.conf.js

module: {
rules: [
  {
    test: /\.vue$/,
    loader: 'vue-loader',
    options: {
      loaders: {
        scss: 'vue-style-loader!css-loader!sass-loader',
        sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
      }
    }
  },
  {
    loader: 'sass-resources-loader',
    options: {
      resources: path.resolve(__dirname, '../src/assets/scss/_variables.scss')
    }
  },

Мой файл "переменных" начинает загружаться, но затем я получаю эту ошибку:

Module parse failed: Unexpected character '#' (1:8)
You may need an appropriate loader to handle this file type.
| $white: #ffffff;
| 
| // The Vue build version to load with the `import` command

Я использую это руководство:

https://vue -loader-v14.vuejs.org / ru / configurations / pre-processors.html

vue версия: 2.93

Answer 1

В конце концов я создал проект с нуля, используя vue-cli @ 3, и добавил к vue.config.js этот код:

const path = require('path');

module.exports = {
  chainWebpack: config => {
    const oneOfsMap = config.module.rule('scss').oneOfs.store
    oneOfsMap.forEach(item => {
      item
        .use('sass-resources-loader')
        .loader('sass-resources-loader')
        .options({
          resources: [
            path.resolve(__dirname, './src/assets/scss/_variables.scss'),
            path.resolve(__dirname, './src/assets/scss/_mixins.scss'),
          ]
        })
        .end()
    })
  }
}

Answer 2

Возможно, вы захотите добавить его в файл vue.config.js в корневом каталоге.Если файл не существует, создайте его и добавьте что-то вроде этого (мой конфиг):

module.exports = {
css: {
    loaderOptions: {
      sass: {
        data: `
          @import "@/assets/_variables.scss";
        `
      }
    }
  }
};