首页 > 解决方案 > Laravel Mix 正在将 Moment.js 代码添加到 CSS 中

问题描述

Laravel mix 正在将 moment JS 代码添加到 CSS 文件中。因此,run npm prod导致错误:

CssSyntaxError:缺少分号。

我将 Moment.js 导入到 Vue 组件之一。

这是我的 JSON 包:

"devDependencies": {
    "axios": "^0.19",
    "compass-mixins": "^0.12.10",
    "cross-env": "^5.1",
    "css-loader": "^3.2.0",
    "laravel-mix": "^4.0.7",
    "lodash": "^4.17.13",
    "resolve-url-loader": "^2.3.1",
    "sass": "^1.15.2",
    "sass-loader": "^7.1.0",
    "vue": "^2.5.17",
    "vue-router": "^3.1.2",
    "vue-template-compiler": "^2.6.10"
},
"dependencies": {
    "bootstrap-vue": "^2.0.0-rc.28",
    "vue-lodash": "^2.0.2",
    "vue-material-design-icons": "^3.3.1",
    "vue2-daterange-picker": "^0.3.1"
}

这是 webpack.mix.js 文件:

mix
.sass("resources/sass/admin/app.scss", "public/admin/css")
.js("resources/js/admin/app.js", "public/admin/js");

这是我运行npm runwatch 后在编译的 CSS 中插入的 JS 代码的一部分:

var map = {
"./af": "./node_modules/moment/locale/af.js",
"./af.js": "./node_modules/moment/locale/af.js",
"./ar": "./node_modules/moment/locale/ar.js",
"./ar-dz": "./node_modules/moment/locale/ar-dz.js"}

很奇怪,为什么会这样?

标签: javascriptlaravellaravel-mix

解决方案


You need to add the following plugin:

plugins: [
    new webpack.IgnorePlugin({
        resourceRegExp: /^\.\/locale$/,
        contextRegExp: /moment$/
    }),
]

Don't forget to import webpack:

const webpack = require('webpack');

推荐阅读