我的网页配置中有以下模块:

module: {
    preLoaders: [
      {
        test: /\.vue$/,
        loader: 'eslint',
        include: projectRoot,
        exclude: /node_modules/
      },
      {
        test: /\.js$/,
        loader: 'eslint',
        include: projectRoot,
        exclude: /node_modules/
      }
    ],
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue'
      },
      {
        test: /\.js$/,
        loader: 'babel',
        include: projectRoot,
        exclude: /node_modules/
      },
      {
        test: /\.json$/,
        loader: 'json'
      },
      {
        test: /\.html$/,
        loader: 'vue-html'
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url',
        query: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.scss$/,
        loaders: ['style', 'css', 'sass']
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url',
        query: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  },

您可以看到,我正在使用sass loader和for*.scss文件我定义这个管道:['style', 'css', 'sass'].

然后我有我的scss文件:

html {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

(...)

最后,我有了我的HTML页面(在VUE.js中的一个VUE文件中),该页面导入了该scss文件:

<script>

require('./styles/main.scss')

(...)

</script>

But somehow I get this error when launching the project:

ERROR in ./~/css-loader!./~/sass-loader!./~/style-loader!./~/css-loader!./~/sass-loader!./src/styles/main.scss
Module build failed:
html {
^
      Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi"
      in /Users/td/uprank/src/styles/main.scss (line 1, column 1)
 @ ./src/styles/main.scss 4:14-247 13:2-17:4 14:20-253

为什么管道出了问题?(看起来webpack正在try 处理['css', 'sass', 'style', 'css', 'sass']个,而不是模块中配置的['style', 'css', 'sass']个.).

我做错了什么?

谢谢

EDIT:链接到完整示例项目:https://dl.dropboxusercontent.com/u/1066659/dummy.zip

推荐答案

之所以会发生这种情况,是因为Vue会自动为CSS、SASS/SCSS和手写笔生成加载程序配置.

(参见projectRoot/build/utils.js行~10到~50)

因此,您会看到错误,因为您有一个网页包加载程序正在try 导入文件,然后Vue正在try 导入(已加载的)文件.所以你可以把你的装载链想象成sass -> css -> style -> sass -> css -> vue-style

为了解决这个问题,你必须go 掉你添加的加载器:

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

只需依靠提供的装载机.

您可以通过以下两种方式之一加载样式表:

注意:MUST使用scss而不是sass,因为sass将try 使用缩进语法而不是括号语法来解析样式表.

1:

<style lang="scss">
  @import './styles/main.scss
</style>

2:

<style src="./styles/main.scss"></style>

这两种方法都会导入样式表,后者只会阻止您向组件添加任何其他样式.

Vue.js相关问答推荐

Nuxt 3中间件在部署到Netliy时基于IP国家代码的重定向不起作用

Vuetify/Vue3 插槽模板之间的阴影

如何向 添加方法和 v-model?

Vue 3 如何通过多个组件传递插槽

v-on 的 .native 修饰符仅在组件上有效,但在 标签上使用

在 Vue 文件中创建根 Vue 实例

Vue子组件等待props

在keyup Vuejs 2上获取输入值

Vuelidate 判断true/false

在 vue 3 中使用 vue-chartjs:createElement 不是函数

在组件的样式部分使用 Vue 变量

Laravel 事件未广播

动态注册本地 Vue.js 组件

如何使用 VueJS / Typescript 导入 JSON 文件?

使用 vue-router 的默认子路由

在Vue中单击路由链接上的激活方法

vue-cli-service build --target lib 导入为 lib 时丢失图像路径

VueJS 2 在多个组件上debounce

在 VueJS 中观察元素的高度

在~/components/AddPlaceModal.vue中找不到导出AddPlaceModal