“”之后的无效 CSS：预期 1 个选择器或规则，是“”

Posted 2023-02-22

【中文标题】“”之后的无效 CSS：预期 1 个选择器或规则，是“”

【英文标题】：Invalid CSS after " ": expected 1 selector or at-rule, was ""“”之后的无效 CSS：预期 1 个选择器或规则，是“”

【发布时间】：2019-07-14 17:56:26

【问题描述】：

我正在使用 SASS 试用 Vue，但我在使用 npm run build 时遇到了问题。我使用 webpack sass-loader。有人可以帮我从这里出去吗？我怀疑问题出在我的 webpack 配置中，但我找不到问题。

错误输出：

ERROR in ./node_modules/css-loader?minimize!./node_modules/vue-loader/lib/style-compiler?"vue":true,"id":"data-v-42a765dc","scoped":true,"hasInlineConfig":false!./node_modules/sass-loader/lib/loader.js?indentedSyntax!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/Header.vue
Module build failed: 
<template>
^
      Invalid CSS after " ": expected 1 selector or at-rule, was ""
      in /Users/rafrasenberg/webconexus/src/wcxwebsite/src/components/Header.vue (line 1, column 1)
 @ ./node_modules/vue-style-loader!./node_modules/css-loader?minimize!./node_modules/vue-loader/lib/style-compiler?"vue":true,"id":"data-v-42a765dc","scoped":true,"hasInlineConfig":false!./node_modules/sass-loader/lib/loader.js?indentedSyntax!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/Header.vue 4:14-355
 @ ./src/components/Header.vue
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
 @ ./src/App.vue
 @ ./src/main.js

header.vue 文件：

<template>
  <header>
    <div id="logo">UA</div>
    <nav>
      <ul>
        <router-link tag='li' :to=" name: 'home'">
          <a>Home</a>
        </router-link>
        <router-link tag='li' :to=" name: 'cutecat'">
          <a>CuteCat</a>
        </router-link>
      </ul>
    </nav>
  </header>
</template>

<script>
export default
  data () 
    return 

  

</script>

<style scoped lang="sass">
  @import './../assets/styles/colors'
header
    display: flex
    justify-content: space-around
    align-items: center
    background-color: $green
    border-bottom: 2px solid darken($green, 30%)
    color: $white
    div#logo
      font-size: 200%
      width: 33%
    nav
      flex-grow: 2
      ul
        padding: 0
        display: flex
        justify-content: space-around
        list-style: none
        a
          text-decoration: none
          color: $white
</style>

现在是我的 webpack.config.js：

var path = require('path')
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')
var WriteFilePlugin = require('write-file-webpack-plugin')

module.exports = 
  entry: './src/main.js',
  output: 
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js'
  ,
  plugins: [
  new BundleTracker(filename: 'webpack-stats.json'),
  new WriteFilePlugin()
  ],
  module: 
    rules: [
      
        test: /\.scss$/,
           use: [
               "style-loader", // creates style nodes from JS strings
               "css-loader", // translates CSS into CommonJS
               "sass-loader" // compiles Sass to CSS, using Node Sass by default
           ]
      ,
      
        test: /\.vue$/,
        loader: 'vue-loader',
      ,
      
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      ,
      
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'url-loader',
        options: 
          name: '[name].[ext]?[hash]'
        
      
    ]
  ,
  resolve: 
    alias: 
      'vue$': 'vue/dist/vue.esm.js',
      '@': path.resolve('src')
    ,
    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
    )
  ])

我的 package.json 以及我安装的所有依赖项：

  "name": "wcxwebsite",
  "description": "A Vue.js project",
  "version": "1.0.0",
  "author": "webconexus <[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": 
    "vue": "^2.5.11"
  ,
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "devDependencies": 
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-3": "^6.24.1",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.11",
    "file-loader": "^1.1.4",
    "node-sass": "^4.11.0",
    "sass-loader": "^6.0.7",
    "style-loader": "^0.23.1",
    "vue-loader": "^13.0.5",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.12.0",
    "webpack-bundle-tracker": "^0.4.2-beta",
    "webpack-dev-server": ">=3.1.11",
    "write-file-webpack-plugin": "^4.5.0"
  

谁能帮帮我？

【参考方案1】：

如果这对任何人有帮助，我会因为缩进错误而收到此错误：

@import ...

  .class
  ...

什么时候应该：

@import ...

.class
  ...

【参考方案2】：

<style scoped lang="sass">
  @import './../assets/styles/colors'
header
    display: flex
    justify-content: space-around
    align-items: center
    background-color: $green
    border-bottom: 2px solid darken($green, 30%)
    color: $white
    div#logo
      font-size: 200%
      width: 33%
    nav
      flex-grow: 2
      ul
        padding: 0
        display: flex
        justify-content: space-around
        list-style: none
        a
          text-decoration: none
          color: $white
</style>

Webpack.config.js

为其添加额外规则

  
    test: /\.sass$/,
    use: [
      'vue-style-loader',
      'css-loader',
      
        loader: 'sass-loader',
        options: 
          indentedSyntax: true
        
      
    ]
  

【讨论】：

这行得通，但是为什么我不能使用没有分号的 sass 语法呢？它解决了问题，但现在我正在使用 scss

@RafRasenberg vue-loader.vuejs.org/guide/pre-processors.html#sass-vs-scss 看看这个

@RafRasenberg 尝试将此添加到您的 webpack 配置文件中 test: /\.sass$/, use: [ 'vue-style-loader', 'css-loader', loader: 'sass-loader', options: indentedSyntax: true ]

你应该删除第一部分然后声明它是一个额外的解决方案。当您编辑 webpack.config 规则时，您不需要将 sass 更改为 scss

忘记你已经改变了它。谢谢我批准了你的回答！