如何在 VUE 应用中使用 sass？

Posted 2023-02-22

【中文标题】如何在 VUE 应用中使用 sass？

【英文标题】：How to use sass in VUE application?

【发布时间】：2020-11-27 13:02:07

【问题描述】：

我正在 VUE 中开发我的第一个应用程序 我在项目的根目录下创建了一个样式文件，并在另一个文件中创建了我想要全局使用的字体。 我正在尝试修改组件的样式以能够声明“”，从而能够全局使用这些样式。 按照有关该主题的官方文档和文章，我没有看到启动控制台的错误的解决方案

"./node_modules/css-loader?sourceMap!./node_modules/vue-loader/lib/style-compiler 中的错误？"vue":true,"id":"data-v-7ba5bd90"," scoped":false,"hasInlineConfig":false!./node_modules/sass-loader/dist/cjs.js!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/应用程序.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 <[e-mail]>",
  "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"
  

【问题讨论】：

看起来您实际上并没有使用 Vue CLI 项目（基于您的 package.json）。我强烈推荐使用Vue CLI 来生成你的项目。然后，启用 Sass 就像安装 node-sass 和 sass-loader，然后在您的 SFC 中使用 <style lang="scss"> 一样简单。

【参考方案1】：

经过大量搜索和尝试不同的解决方案后，我发现这篇文章并逐步遵循它对我来说是完美的。 只有安装文件加载器并将文章中突出显示的字段添加到我的 webpack 中，我才能解决问题。

我把链接留给你，以防有人遇到同样的情况。

https://chriscourses.com/blog/loading-fonts-webpack

感谢您的帮助。

【参考方案2】：

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

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 加载器

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

【讨论】：

感谢您的宝贵时间，但它不起作用，不知道为什么。出现同样的错误

您能否也将package.jsonyour 添加到问题中？

安装vue-style-loader，如果这不起作用我可能需要查看整个项目回购:)

这解决了问题吗？因为你接受了它

类似的东西。我找到了以下文章并结合您的回答，我设法修复了它。你的帮助决定了我不会重启项目