vue-sass-loader 只编译样式标签，不编译文件

Posted 2023-02-22

【中文标题】vue-sass-loader 只编译样式标签，不编译文件

【英文标题】：vue-sass-loader only compile style tag, not files

【发布时间】：2020-03-30 18:09:17

【问题描述】：

我在我的 webpack.mix.js 文件上使用以下规则，以尝试将我的变量 scss 文件添加到我的所有 vue 组件：

    test: /\.scss$/,
    use: [
        "vue-style-loader",
        "css-loader",
        
            loader: "sass-loader",
            options: 
                data: `@import "@/_var.scss`
            
        
    ]

但是当我运行npm run watch 时，我收到以下错误：

ERROR in ./resources/sass/app.scss
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

@import "base/normalize";
^
      Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi"
      in /Users/jscotto/app/app.app.com/resources/sass/app.scss (line 1, column 1)
    at runLoaders (/Users/jscotto/app/app.app.com/node_modules/webpack/lib/NormalModule.js:316:20)
    at /Users/jscotto/app/app.app.com/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /Users/jscotto/app/app.app.com/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/Users/jscotto/app/app.app.com/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Object.render [as callback] (/Users/jscotto/app/app.app.com/node_modules/sass-loader/dist/index.js:89:7)
    at Object.done [as callback] (/Users/jscotto/app/app.app.com/node_modules/neo-async/async.js:8067:18)
    at options.error (/Users/jscotto/app/app.app.com/node_modules/node-sass/lib/index.js:294:32)
 @ ./resources/sass/app.scss

ERROR in ./resources/sass/app.scss (./node_modules/css-loader/dist/cjs.js??ref--6-2!./node_modules/postcss-loader/src??postcss0!./node_
modules/resolve-url-loader??ref--6-4!./node_modules/sass-loader/dist/cjs.js??ref--6-5!./node_modules/vue-style-loader!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ref--12-2!./resources/sass/app.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

@import "base/normalize";
^
      Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi"
      in /Users/jscotto/app/app.app.com/resources/sass/app.scss (line 1, column 1)
 @ ./resources/sass/app.scss 2:14-397

ERROR in /Users/jscotto/app/app.app.com/resources/js/app.ts
./resources/js/app.ts

我的完整webpack.mix.js 文件：

mix.sourceMaps(true, "source-map")
    .ts("resources/js/app.ts", "public/js")
    .sass("resources/sass/app.scss", "public/css")
    .webpackConfig(
        module: 
            rules: [
                
                    test: /\.tsx?$/,
                    loader: "ts-loader",
                    options: 
                        appendTsSuffixTo: [/\.vue$/]
                    ,
                    exclude: /node_modules/
                ,
                
                    test: /\.scss$/,
                    include: [
                        path.resolve(__dirname, "resources/js/components")
                    ],
                    use: [
                        "vue-style-loader",
                        "css-loader",
                        
                            loader: "sass-loader",
                            options: 
                                prependData: "$scotto: #fefefe"
                            
                        
                    ]
                
            ]
        ,
        resolve: 
            extensions: ["*", ".js", ".jsx", ".vue", ".ts", ".tsx"],
            alias: 
                "@": path.resolve("resources/sass")
            
        
    )
    .extract(["vue"])
    .version()
    .scripts("resources/js/modules/*.js", "public/js/modules.js")
    .options(
        postCss: [
            require("lost"),
            require("autoprefixer")(
                grid: true
            )
        ]
    )
    .browserSync(
        proxy: process.env.BROWSERSYNC_PROXY,
        host: process.env.BROWSERSYNC_HOST,
        browser: "google chrome"
    );

截至 2019 年 12 月 9 日的更新错误

ERROR in ./resources/js/components/clubs/list-clubs.vue?vue&type=style&index=0&id=175555ab&scoped=true&lang=scss& (./node_modules/cs
s-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-2!./node_modules/sass-lo
ader/dist/cjs.js??ref--8-3!./node_modules/vue-style-loader!./node_modules/sass-loader/dist/cjs.js??ref--12-2!./node_modules/vue-load
er/lib??vue-loader-options!./resources/js/components/clubs/list-clubs.vue?vue&type=style&index=0&id=175555ab&scoped=true&lang=scss&)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

            v-bind:key="index"

                                                                                                 ^
      Expected "".
  ╷
4 │ var content = require("!!../../../../node_modules/sass-loader/dist/cjs.js??ref--12-2!../../../../node_modules/vue-loader/lib/ind
ex.js??vue-loader-options!./list-clubs.vue?vue&type=style&index=0&id=175555ab&scoped=true&lang=scss&");
  │                                                                                                                                 
                                                                                                      ^
  ╵
  stdin 4:231  root stylesheet
      in /Users/jscotto/app/app.app.com/resources/js/components/clubs/list-clubs.vue (line 4, column 231)
 @ ./resources/js/components/clubs/list-clubs.vue?vue&type=style&index=0&id=175555ab&scoped=true&lang=scss& (./node_modules/style-loader!./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-2!./node_modules/sass-loader/dist/cjs.js??ref--8-3!./node_modules/vue-style-loader!./node_modules/sass-loader/dist/cjs.js??ref--12-2!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/clubs/list-clubs.vue?vue&type=style&index=0&id=175555ab&scoped=true&lang=scss&) 2:14-515
 @ ./resources/js/components/clubs/list-clubs.vue?vue&type=style&index=0&id=175555ab&scoped=true&lang=scss&
 @ ./resources/js/components/clubs/list-clubs.vue
 @ ./resources/js sync \.vue$/
 @ ./resources/js/app.ts
 @ multi ./resources/js/app.ts ./resources/sass/app.scss

ERROR in /Users/jscotto/app/app.app.com/resources/js/app.ts

【问题讨论】：

是因为您在导入后缺少分号吗？

@CraigHarshbarger 仍然有同样的错误。

我想知道它是否像这样github.com/vuejs-templates/webpack-simple/issues/107我相信laravel有自己的webpackconfig。可能已经有 scss 规则

@CraigHarshbarger 不要相信它会在任何地方合并。我正在从我的 webpack.mix.js 中调用 .webpackConfig() 来获取我正在应用的规则。

您在导入结束时缺少"，也许可以试试？

【参考方案1】：

您可以试试prependData 选项吗？

    test: /\.scss$/,
    use: [
        "vue-style-loader",
        "css-loader",
        
            loader: "sass-loader",
            options: 
                prependData: '@import "@/_var.scss";',
            
        
    ]

【讨论】：

如果你从 sass-loader 中删除选项部分，它是否可以正常工作？