vue.js - 如何在VUE应用程序中使用sass？

Question

我正在VUE中开发我的第一个应用程序
我已经在项目的根目录下创建了一个样式文件，并在另一个文件中创建了要在全局使用的字体。
我正在尝试修改组件的样式，以便能够声明“”，从而能够在全局范围内使用这些样式。
在有关该主题的官方文档和文章之后，我看不到启动控制台的错误的解决方案
“./node_modules/css-loader?sourceMap!./node_modules/vue-loader/lib/style-compiler中的错误？{“vue”:true，“id”:“data-v-7ba5bd90”，“作用域”: false，“hasInlineConfig”:false}!./node_modules/sass-loader/dist/cjs.js!./node_modules/vue-loader/lib/selector.js？type = styles＆index = 0!./src/App.vue ”
这是我的vue.config.js

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                prependData: `@import "@/styles/_variables.scss";`
            }
        }
    },
}

这是我的webpack.config.js

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              prependData:
              `@import "@/styles/_variables.scss";`
            }
          }
        ],
      }, 
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              // prependData:
              // `@import "@/styles/_variables.scss";`
              resources: [
                path.resolve(__dirname, '../src/styles/_variables.scss')
              ]
            }
          }
        ],
      },       
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

这是我的App.vue

<template>
  <div id="app">

    <div class="container">
      <ciev-app-header />
      <router-view></router-view>
      <hr>
      <ciev-app-footer></ciev-app-footer>
    </div>
  </div>
</template>

<script>
import Header from './components/Shared/Header';
import Footer from './components/Shared/Footer.vue';

export default {
    name: 'app',
    components:{
      'ciev-app-header': Header,
      'ciev-app-footer': Footer
    },
    created () {
      this.$store.dispatch('tryAutoLogin')
    }
}
</script>


<style lang="scss">

@font-face {
    font-family: 'RalewayRegular';
    src: local('RalewayRegular'),
    url(./fonts/Raleway-Regular.ttf) format('truetype');
    font-style: normal;
}

  body, html {
    margin: 0;
    font-family: 'RalewayRegular', sans-serif;
  }
</style>

有人可以告诉我我在做什么错。
预先感谢您的时间和帮助。
我的package.json

{
  "name": "vue-cli",
  "description": "A Vue.js project",
  "version": "1.0.0",
  "author": "Miguel Alvarez Gomez <miguel.alvarez@softtek.com>",
  "license": "MIT",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "axios": "^0.19.2",
    "style-resources-loader": "^1.3.3",
    "vue": "^2.5.11",
    "vue-router": "^3.3.4",
    "vuex": "^3.5.1"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-3": "^6.24.1",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.4",
    "node-sass": "^4.14.1",
    "sass-loader": "^9.0.3",
    "vue-loader": "^13.0.5",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  }
}

Answer 1

您可以在style-resources-loader文件中使用像这样的vue.config.js插件
vue.config.js

const path = require('path');

module.exports = {
  ...
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'scss',
      // load which style file you want to import globally
      patterns: [path.resolve(__dirname, './src/styles/_variables.scss')],
    },
  }
};

编辑:如果这不起作用，请将其添加到您的webpack.config module.rules数组。它将告诉webpack为您的 .scss文件使用sass loader

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