Vue项目全局Less配置[Vue.js项目实践: 新冠自检系统]

新冠疫情自我检测系统网页设计开发文档

Sylvan Ding 的第一个基于 Vue.js 的项目. 本项目所提供的信息，只供参考之用，不保证信息的准确性、有效性、及时性和完整性，更多内容请查看国家卫健委网站！
Explore the docs »

View Demo · Report Bug · Request Feature

Vue项目全局Less配置

We use Less as our pre-processor for the project. You need to manually install the corresponding webpack loaders with correct versions:

# Less
npm i less@3.9.0 less-loader@4.1.0 -D --legacy-peer-deps

Then add the loader to your webpack config build/webpack.base.conf.js. For example:

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/i,
        use: [
          // compiles Less to CSS
          "style-loader",
          "css-loader",
          "less-loader",
        ],
      },
    ],
  },
};

For every single Vue component, we create a corresponding Less file in src/assets/styles.

开发环境

node	14.16.1
npm	8.18.0
vue-cli	2.9.6
vue	2.5.2

解决方案

You can automatically import files (for colors, variables, mixins…) by following the next steps.

Simply using the style-resources-loader or vue-cli-plugin-style-resources-loader to set global less variables is for Vue CLI 3, which creates a new project by running vue create. We use Vue CLI 2, running vue init to create a project. So make sure that you won’t use these packages under Vue CLI 2 environment because vue.config.js is unavailable.

First install the package:

# install package
npm i sass-resources-loader -D --legacy-peer-deps

Then add function lessResourceLoader to function cssLoaders in file /build/utils.js:

function lessResourceLoader() {
    var loaders = [
      cssLoader,
      'less-loader',
      {
        loader: 'sass-resources-loader',
        options: {
          resources: [
            path.resolve(__dirname, '../src/assets/styles/common.less'),
          ]
        }
      }
    ];
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

Finally, modify function cssLoaders return item less:

less: lessResourceLoader()

Now src/assets/styles/common.js becomes your global style file.

转载请注明出处：©️ Sylvan Ding 2022