标签: less-loader

Antd在这里说，内联 javascript 应该在较少的javascriptEnabled: true选项中启用。但是，由于安全问题，从 3.0.0 版起，此选项已被 Less 弃用，因为它容易受到代码注入的影响，此处提到（搜索“启用内联 JavaScript（已弃用）”）和此处。

试图用 Ant 解决这个问题似乎是不切实际的，因为我们可能需要为 less 中使用的每个新的内联 javascript 函数创建一个新插件，并且不清楚有多少实例以及它有多复杂。

谷歌搜索显示围绕这个主题的讨论很少。Ant 是否有解决此问题或可能的变通方法的前景？其他开发人员如何处理这个问题，或者他们只是忽略它？谢谢。

为什么webpack.config.js不设置全局LESS变量的任何想法：current-vehicle定义于：/resources/scripts/theme.js？

/webpack.config.js

const merge = require("webpack-merge");
const path = require("path");
const baseConfig = require("laravel-mix/setup/webpack.config");

require('dotenv').config();

/**
 * Update the output directory and chunk filenames to work as expected.
 *
 * @param {object} config - The webpack config
 *
 * @return {object} The updated webpack config
 */
const addOutputConfiguration = config => {
  const publicPath = process.env.CDN_URL + '/js/';
  return merge(config, {
    output: {
      path: path.resolve(__dirname, "public/cdn/js"),
      publicPath,
      chunkFilename: "[name].js"
    },
    module: { …

我正在使用Nuxt.Js和Ant作为前端框架来构建Web平台。我看到可以使用Less and Less-loader更改Ant的主题。所以我在构建之前用以下代码完成了它：

antd-ui.js

import Vue from 'vue'
import Antd from 'ant-design-vue/lib'

Vue.use(Antd)

nuxt.config.js

...
css: [
    {
      src: 'ant-design-vue/dist/antd.less',
      lang: 'less'
    }
],
...
build: {
    transpile: [/^element-ui/],
    loaders: {
      less: {
        javascriptEnabled: true,
        modifyVars: {
          // You can here change your Ant vars
        }
      },
    },
...

这样就可以了，但是现在我想实现暗模式，因此我需要通过如下代码动态修改var：

component.vue

<script>
import less from 'Less'

export default {
  ...
  methods: {
    changeTheme() {
      less.modifyVars(
        ...
      )
    }
  ...
}
...

但是我在控制台中有以下消息：

少完成了，没有加载任何表

一切都没有改变...所以，如果您能以任何方式帮助我，请先谢谢！

在我的 webpack 配置中，我希望能够定义一个全局的 less-variables 文件，该文件将包含在每个 less 组件中。

使用 sass-loader 您可以提供以下选项：

loaderOptions: {
    data: "@import 'globals.sass'"
}

我能用 less-loader 找到的唯一选项是 globalVars：

loaderOptions: {
    globalVars: {}
}

现在，这一切正常，但是 globalVars 需要一个带有键值对的对象。我宁愿在每个组件都附加一个 theme.less 。使用 less-loader 可以做到吗？

我正在使用webpack创建bundle.js文件。我决定我也想开始使用LESS，并且我尝试按照说明添加less-loader：

https://github.com/webpack-contrib/less-loader

我跑了：npm-install less-loader --save-dev

然后，我更新了webpack.config.js使其包含以下规则：

module.exports = {
    entry: "./src/entry.js",
    output: {
        path: __dirname,
        filename: "./bundle.js",
        publicPath: "/"
    },
    module: {
    //******** BELOW IS THE RULES U ADDED *************/
        rules: [{
            test: /\.less$/,
            use: [{
              loader: 'style-loader' // creates style nodes from JS strings
            }, {
              loader: 'css-loader' // translates CSS into CommonJS
            }, {
              loader: 'less-loader' // compiles Less to CSS
            }]
        }],
         //******** ABOVE IS THE RULES U ADDED *************/
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader', …

当我尝试使用Webpack 将Ant Design 库加载到前端时，我从6.0.0版移动到6.1.0less-loader版时遇到此错误。我想知道是否有其他人遇到过这个问题并解决了它（我在下面回答了它）。

module: { rules: [{
    test: /\.less$/,
    use: [
        { loader: "style-loader" },
        { loader: "css-loader" },
        {
            loader: "less-loader",
            options: {
                javascriptEnabled: true,
            }
        }
    ]
}]}

ERROR in ./node_modules/.pnpm/registry.npmjs.org/antd/4.2.0_react-dom@16.13.1+react@16.13.1/node_modules/antd/dist/antd.less (./node_modules/.pnpm/registry.npmjs.org/css-loader/3.5.3_webpack@4.43.0/node_modules/css-loader/dist/cjs.js!./node_modules/.pnpm/registry.npmjs.org/less-loader/6.1.0_webpack@4.43.0/node_modules/less-loader/dist/cjs.js??ref--6-2!./node_modules/.pnpm/registry.npmjs.org/antd/4.2.0_react-dom@16.13.1+react@16.13.1/node_modules/antd/dist/antd.less)
Module build failed (from ./node_modules/.pnpm/registry.npmjs.org/less-loader/6.1.0_webpack@4.43.0/node_modules/less-loader/dist/cjs.js):
ValidationError: Invalid options object. Less Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'javascriptEnabled'. These …