Proyecto Vue global Menos configuración [práctica del proyecto Vue.js: sistema de autoverificación COVID-19]

Documentos de diseño y desarrollo web del sistema de autodetección COVID-19

El primer proyecto de Sylvan Ding basado en Vue.js. La información proporcionada en este proyecto es solo de referencia y no se garantiza la exactitud, validez, puntualidad e integridad de la información. Para obtener más información, consulte la Comisión Nacional de Salud y Salud. ¡sitio web!
Explore los documentos »

Ver demostración · Informar error · Solicitar función

Proyecto Vue global Menos configuración

Lo utilizamos Lesscomo nuestro preprocesador para el proyecto. Debe instalar manualmente los cargadores de paquetes web correspondientes con las versiones correctas:

# Less
npm i [email protected] [email protected] -D --legacy-peer-deps

Luego agregue el cargador a su webpackconfiguración build/webpack.base.conf.js. Por ejemplo:

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

Para cada componente de Vue, creamos un archivo Less correspondiente en formato src/assets/styles.

entorno de desarrollo

nodo	14.16.1
npm	8.18.0
ver-cli	2.9.6
vista	2.5.2

solución

Puedes importar archivos automáticamente (para colores, variables, mixins…) siguiendo los siguientes pasos.

Simplemente usar style-resources-loader o vue-cli-plugin-style-resources-loader para establecer menos variables globales es para Vue CLI 3, que crea un nuevo proyecto ejecutando vue create. Usamos Vue CLI 2, ejecutándolo vue initpara crear un proyecto. Así que asegúrese de no utilizar estos paquetes en el entorno Vue CLI 2 porque vue.config.jsno están disponibles.

Primero instale el paquete:

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

Luego agregue la función lessResourceLoaderpara funcionar cssLoadersen el archivo /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)
    }
  }

Finalmente, modifique cssLoadersel elemento de retorno de la función less:

less: lessResourceLoader()

Ahora src/assets/styles/common.jsse convierte en su archivo de estilo global.

Indique la fuente al reimprimir: ©️ Sylvan Ding 2022