如何通过Webpack在Vue CLI 3中包含CSS文件

时间:2019-01-20 17:41:53

标签: vue.js webpack vue-cli-3

我是Vue JS的新手,我正在尝试将HTML和CSS设计转换为Vue组件

在app.vue文件中包括这种方式

<style>
 @import  './assets/css/style.css';
</style>

在webpack.config.js中

var path = require("path")

module.exports = {
    "entry": "./lib/index.js"
,   "output": {
        "path": __dirname + "/build"
    ,   "filename": "xxhash.js"
    ,   "library": "XXH"
    ,   "libraryTarget": "umd"
    },




    module: {

    rules: [
      {
        test: /\.css$/,
        use: [

          'vue-style-loader',
          'css-loader',
          'sass-loader'

        ]
      }
    ]


  }


}

这是错误

 Failed to compile.

>./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasInlineConfig":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue
Module build failed: CssSyntaxError: postcss-import: C:\Users\Parvez\Desktop\section\src\assets\css\style.css:994:1: Unexpected }
    at Input.error (C:\Users\Parvez\Desktop\section\node_modules\postcss\lib\input.js:119:22)
    at Parser.unexpectedClose (C:\Users\Parvez\Desktop\section\node_modules\postcss\lib\parser.js:510:26)
    at Parser.end (C:\Users\Parvez\Desktop\section\node_modules\postcss\lib\parser.js:353:18)
    at Parser.parse (C:\Users\Parvez\Desktop\section\node_modules\postcss\lib\parser.js:68:26)
    at parse (C:\Users\Parvez\Desktop\section\node_modules\postcss\lib\parse.js:24:16)
    at new LazyResult (C:\Users\Parvez\Desktop\section\node_modules\postcss\lib\lazy-result.js:70:24)
    at Processor.process (C:\Users\Parvez\Desktop\section\node_modules\postcss\lib\processor.js:117:12)
    at runPostcss (C:\Users\Parvez\Desktop\section\node_modules\postcss-import\lib\process-content.js:46:6)
    at processContent (C:\Users\Parvez\Desktop\section\node_modules\postcss-import\lib\process-content.js:40:10)
    at Promise.resolve.then.content (C:\Users\Parvez\Desktop\section\node_modules\postcss-import\index.js:244:12)
    at <anonymous>
 @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasInlineConfig":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 4:14-296 13:3-17:5 14:22-304
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8081 webpack/hot/dev-server ./src/main.js

0 个答案:

没有答案