VUE CLI 预处理器中的 SASS 文件会发生什么？

编程问答 2022-06-01

问题描述

我是 Vue、SaSS 和 CLI 的新手。新年快乐！

我可以创建一个全局的 .scss 文件并编译它以便所有组件都可以看到它，但是我无法使用 .sass 文件来执行此操作。

例如我有以下 sass 文件：

    // Base
// ––––––––––––––––––––––––––––––––––––––––––––––––––

// Set Box-sizing globally to handle padding and border widths
*,*:after,*:before
  Box-sizing: inherit

// The base font-size is set at 62.5% for having the convenience
// of sizing rems in a way that is similar to using px: 1.6rem = 16px
html
  Box-sizing: border-Box
  font-size: 62.5%

    // Default body styles
    body
      //color: $color-secondary
      font-family: 'Roboto','Helvetica Neue','Helvetica','Arial',sans-serif
      font-size: 1.6em // Currently ems cause chrome bug misinterpreting rems on body element
      font-weight: 300
      letter-spacing: .01em
      line-height: 1.6

当我运行 serve 时它会构建但未应用这些样式：

我的 vue.config.js 文件是这样的：

module.exports = {
    css: {
        loaderOptions: {
            // pass options to sass-loader
            // @/ is an alias to src/
            // so this assumes you have a file named `src/variables.sass`
            // Note: this option is named as "prependData" in sass-loader v8
            sass: {
                prependData: `@import "~@/assets/styles/sass/_Base.sass"`
            },// by default the `sass` option will apply to both Syntaxes
            // because `scss` Syntax is also processed by sass-loader underlyingly
            // but when configuring the `prependData` option
            // `scss` Syntax requires an semicolon at the end of a statement,while `sass` Syntax requires none
            // in that case,we can target the `scss` Syntax separately using the `scss` option
            scss: {
                //prependData: `@import "~@/assets/styles/sass/test.scss";`
            }
        }
    }
}

我的依赖供参考：

  "dependencies": {
    "core-js": "^3.6.5","vue": "^3.0.0","vue-router": "^4.0.0-0","vuex": "^4.0.0-0","chart.js": "^2.9.4","vue-chartjs": "^3.5.1"
  },"devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0","@vue/cli-plugin-eslint": "~4.5.0","@vue/cli-plugin-router": "~4.5.0","@vue/cli-plugin-vuex": "~4.5.0","@vue/cli-service": "~4.5.0","@vue/compiler-sfc": "^3.0.0","babel-eslint": "^10.1.0","eslint": "^6.7.2","eslint-plugin-vue": "^7.0.0-0","sass": "^1.26.5","sass-loader": "^8.0.2"
  },

我没有在 Main.js 或组件中导入任何内容。

此 SaSS 文件是否在某处转换为 CSS 或发生了什么？

谢谢

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

sasssasssass-loadervue.js