vue.js 中的问题与导入的 .scss答案

【问题标题】：Issue in vue.js with imported .scssvue.js 中的问题与导入的 .scss
【发布时间】：2022-07-08 21:38:32
【问题描述】：

我目前正在重构我的 vue 应用程序，以便更好地了解应用的 css/scss 规则。我在组件中拥有最多的部分，但希望将导入的 .scss 文件用于特定的规则集。

出现的问题是，导入的 .scss 文件的处理方式与常规 .css 文件一样。

例如：

/* inside @/styles/_default.scss */
div {
  background-color: white;
  & span {
    color: black;
  }
}

<span> 标签不会接收样式。在开发控制台中，它被标记为无效语法。

但是在任何 .vue 组件中，它都可以很好地呈现。当然只有<style lang="scss">。

我的 App.vue 像这样导入 .scss 文件：

<style lang="scss">
@import url('@/styles/_default.scss');
...

在我的 vue.config.js 中，我有以下几行：

module.exports = defineConfig({
  transpileDependencies: true,
  css: {
        loaderOptions: {
          sass: {
            sassOptions: {
              module: {
                rules: [
                  {
                    test: /\.s[ac]ss$/i,
                    use: [
                      // Creates `style` nodes from JS strings
                      "style-loader",
                      // Translates CSS into CommonJS
                      "css-loader",
                      // Compiles Sass to CSS
                      "sass-loader",
                    ], }, ], }, }, }, },
        },
  })

我猜我的 vue.config.js 有点错误。我尝试了很多其他配置，但到目前为止没有一个配置有效。他们中的大多数在编译时都会抛出错误。我也不太明白配置文件是如何工作的，但我觉得我在这个主题上找到的所有内容都不再是最新的了:(

版本信息：

"dependencies": {
   "vue": "^3.2.13",
},
"devDependencies": {
   "sass-loader": "^13.0.2",
   "node-sass": "^7.0.1",
}

感谢您的时间和精力

【问题讨论】：

标签： vue.js sass vuejs3

【解决方案1】：

尝试像这样导入：

<style lang="scss" src="@/styles/_default.scss"></style>

对我有用

【讨论】：