意外字符“@”

Question

我最近切换到 laravel 5.4。

当我尝试运行 npm run watch 时，出现以下错误 --

我什至没有在 sass 文件中进行任何编辑。
Sass 文件看起来像这样 ---

// Fonts
@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);

// Variables
@import "variables";

// Bootstrap
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

我该如何解决这个问题？

我的 package.json 文件如下所示 --

{
    "private": true,
    "scripts": {
        "dev": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "hot": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "production": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.15.2",
        "bootstrap-sass": "^3.3.7",
        "jquery": "^3.1.0",
        "laravel-mix": "^0.5.0",
        "less": "^2.7.2",
        "less-loader": "^2.2.3",
        "lodash": "^4.16.2",
        "vue": "^2.0.1"
    }
}

Answer 1

确保您的计算机上安装了 sass。如果您没有安装它，说明在这里：http://sass-lang.com/install。

然后你需要确保项目中也安装了sass。阅读您的 package.json 似乎您有 less。

运行: npm i --save-dev sass

默认情况下，您的项目已安装 less。从根文件夹中找到文件 webpack.mix.js。找到以下行

mix.less('resources/assets/less/app.less', 'public/css')

.less('resources/assets/less/admin.less', 'public/css');

并将其更改为

mix.sass('resources/assets/sass/app.sass', 'public/css')

.sass('resources/assets/sass/admin.sass', 'public/css/admin');

如果您没有看到完全相同的线条，请查找类似的内容。

Answer 2

这是 Laravel Mix 的当前问题。 GitHub 上有一个未解决的问题讨论。

https://github.com/JeffreyWay/laravel-mix/issues/200

根据一些用户的说法，您可以使用 Laravel Mix 版本 0.5.8，您的问题就会消失。编辑您的 package.json 文件以具有 "laravel-mix": "0.5.8"

我建议在问题解决之前使用它。

这似乎是 windows 用户的问题。

编辑

截至目前，问题似乎已经解决。您需要安装最新版本的 Mix，并将 "vue-loader": "10.1.0" 添加到 package.json 文件。

意外字符“@”

Unexpected character '@'

laravel

npm

sass

laravel-5.4

编辑