SassError: Rails 6、Webpacker和Vue之后的无效CSS

Question

我刚刚开始了一个新的rails-6项目，包括webpacker和vue。我想在sass中使用vue组件样式，但是sass加载器提供：

错误:模块构建失败(来自./node_node/sass-加载程序/dist/cjs.js) SassError:在“”之后的无效CSS :预期的1个选择器或".foo“

有人见过这个吗？或者，我如何调试哪里出了问题？

组件foo.vue

<template>...</template>
<script>...</script>
<style lang="sass">
  .foo
    margin: 0
    padding: 0
</style>

删除sass代码的初始缩进无助于此。

版本

• rails 6.1.3.1
• webpacker 5.2.1
• 节点14.16.1

项目设置

rails new --database=postgresql --skip-test foo
rails webpacker:install:vue
yarn add vue-turbolinks
rails webpacker:install:coffee
yarn add coffee-loader@1
yarn add sass-loader@10

package.json

{
  "name": "foo",
  "private": true,
  "dependencies": {
    "@popperjs/core": "^2.9.2",
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "5.2.1",
    "@tabler/core": "tabler/tabler",
    "bootstrap": "^5.0.0-beta3",
    "coffee-loader": "1",
    "coffeescript": "1.12.7",
    "sass-loader": "10",
    "tabler": "^1.0.0-alpha.8",
    "turbolinks": "^5.2.0",
    "vue": "^2.6.12",
    "vue-loader": "^15.9.6",
    "vue-select": "^3.11.2",
    "vue-template-compiler": "^2.6.12",
    "vue-turbolinks": "^2.2.2"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.11.2"
  }
}

我还添加了vue-select、bootstrap和tabler。但我不认为他们会干涉。

Webpack组态config/webpack/environment.js

const { environment } = require('@rails/webpacker')
const coffee =  require('./loaders/coffee')
const { VueLoaderPlugin } = require('vue-loader')
const vue = require('./loaders/vue')

environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin())
environment.loaders.prepend('vue', vue)
environment.loaders.prepend('coffee', coffee)
module.exports = environment

布局application.html.haml

!!!
%html
  %head
    %title Foo
    = csrf_meta_tags
    = csp_meta_tag
    = stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'
  %body
    #vue_app
      = yield

Pack packs/application.js

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"

Rails.start()
Turbolinks.start()
ActiveStorage.start()

import 'bootstrap'
import '@tabler/core'

import TurbolinksAdapter from 'vue-turbolinks'
import Vue from 'vue/dist/vue.esm'

Vue.use(TurbolinksAdapter)

document.addEventListener('turbolinks:load', () => {
  const app = new Vue({
    el: '#vue_app',
    data: () => {
      return {}
    },
    components: {}
  })
})

Answer 1

Sass与SCSS之争

有两个语法变体

Sass有两种语法可用。第一个被称为SCSS (Sassy CSS)，在整个引用中使用，它是CSS语法的扩展。这意味着每个有效的CSS样式表都是一个意义相同的有效SCSS文件。下面描述的Sass特性增强了这个语法。使用此语法的文件具有.scss扩展名。 第二个和indented syntax (or sometimes just “Sass”)，的旧语法(称为)提供了一种更简洁的编写CSS的方法。使用缩进而不是括号来表示选择器的嵌套，使用换行符而不是分号来分隔属性。使用此语法的文件具有.sass扩展名。

另见：https://stackoverflow.com/a/5654471/2066546，https://sass-lang.com/documentation/syntax

sass-loader使用哪种语法？

默认情况下，sass-装载机根据文件扩展名选择语法：

indentedSyntax选项具有sass扩展的true值。

这意味着只有当文件扩展名为.sass时才使用原始的sass语法(缩进语法)。在具有扩展.vue的vue组件中，sass-loader默认使用较新的"scss“语法。

如何配置sass-loader以使用sass语法(缩进语法)？

sass-加载器文档有关于如何在webpack配置中指定indentedSyntax: true的说明。

// webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "sass-loader",
            options: {
              sassOptions: {
                indentedSyntax: true
              },
            },
          },
        ],
      },
    ],
  },
};

然而，使用网包器，webpack配置是自动组合的。所以，我们需要修改现有的配置对象

// config/webpack/environment.js

const { environment } = require('@rails/webpacker')

// To get an overview, have a look at `environment.loaders`.
console.log(environment.loaders)

const { merge } = require('webpack-merge')
const sassConfig = environment.loaders.find(el => el.key == 'sass')
const sassLoader = sassConfig.value.use.find(el => el.loader == 'sass-loader')

sassLoader.options = merge(sassLoader.options, {
  sassOptions: {
    indentedSyntax: true
  }
})

module.exports = environment

这需要webpack-合并：yarn add webpack-merge。

我相信有更好的方法。请随意添加答案或评论！

Answer 2

Sass使用花括号：.foo {页边距:0}

Answer 3

您可以尝试将<%= stylesheet_pack_tag 'application', media: 'all' %>包含在根HTML文件中。

我想它会成功的。