Дедупе CSS в режиме разработки Vue.js - PullRequest
Новая
       9

Дедупе CSS в режиме разработки Vue.js

1 голос
/ 08 марта 2019

Я работаю над проектом Vue.js, в котором интенсивно используются отдельные файловые компоненты. С этими компонентами связаны стили scss.

В рабочем режиме отфильтровывается дубликат css, возникающий при импорте одного и того же компонента несколько раз. Но в режиме разработки один и тот же scss импортируется несколько раз.

Это приводит к замедлению работы хром-отладчика при проверке и изменении CSS.

Кто-нибудь знает способ дедупликации css / scss, привязанный к отдельным компонентам файла в режиме разработки?

Вот моя текущая конфигурация vue: 

module.exports = {
  lintOnSave: false,
  configureWebpack: {
    resolve: {
      alias: require("./aliases.config").webpack
    },
    plugins: [
  new webpack.ProvidePlugin({
    $: "jquery",
    _: "lodash"
  }),
  new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
    ]
  }

1 Ответ

0 голосов
/ 04 июня 2019

Вот как мы решили эту проблему.

  1. Импортируйте только чистые SCSS в компоненты (т. Е. Миксины, переменные, функции).Если файл с CSS импортируется в каждый компонент, загрузчик sass НЕ будет дедуплицировать CSS в режиме разработки.

  2. В вашей конфигурации vue добавьте следующее, чтобы включить переменные scss в каждый отдельный файловый компонент: 

       module.exports = {
     ... 
     css: {
        loaderOptions: {
          sass: {
            data: `
              @import "@src/_variables.scss";
            `
          }
        }
      },
     ...
    }

  3. Импортируйте глобальные scss взапись вашего приложения (main.js или эквивалентная) 

    import "bootstrap";
import "@src/global.scss";

В вашем файле global.scss вы можете импортировать файл переменных, чтобы он также мог обращаться к переменным scss.

...