意外字符“@”

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

这是 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 文件中。

Answer 2

确保您的计算机上安装了 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');

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