Vue-CLI 3: Могу ли я иметь не один файловый компонент SASS, скомпилированный CLI? - PullRequest
Новая
       38

Vue-CLI 3: Могу ли я иметь не один файловый компонент SASS, скомпилированный CLI?

0 голосов
/ 01 сентября 2018

Когда Vue-CLI 3 создает проект, создается public / index.html. 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Website</title>
    </head>
    <body>
        <noscript>
            <strong>We're sorry but the website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
        </noscript>
        <div id="app"></div>
        <!-- built files will be auto injected -->
    </body>
</html>

Я хотел бы добавить внешний CSS-файл в заголовок, но исходный файл находится в SASS / SCSS. Причина, по которой я хотел бы, чтобы этот файл был в стиле разметки вокруг приложения Vue (<div id="app">/<div>), например, элемент <body>. 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Website</title>
        <link href="[I want to reference a compiled SCSS file here]" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <noscript>
            <strong>We're sorry but the website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
        </noscript>
        <div id="app"></div>
        <!-- built files will be auto injected -->
    </body>
</html>

Я читал руководство по Vue-CLI 3 по CSS, https://cli.vuejs.org/guide/css.html,, но у меня сложилось впечатление, что на этой странице я советую интегрировать SASS в однофайловые компоненты (файлы * .vue), например, разрешить отдельные файловые компоненты для доступа к глобальным переменным SASS. Могу ли я заставить процесс сборки Vue-CLI 3 скомпилировать файл SASS, который не имеет прямого отношения ни к одному из файлов * .vue, но все еще является частью приложения Vue для целей развертывания?

1 Ответ

0 голосов
/ 02 сентября 2018

Я не могу найти ответ на мой конкретный вопрос.

Однако я нашел обсуждение в репозитории Vue Loader Github.

https://github.com/vuejs/vue-loader/issues/328#issuecomment-363165459

https://github.com/vuejs/vue-loader/issues/328#issuecomment-363189176

По сути, любые глобальные стили, которые не содержат переменных SASS или миксинов, могут быть импортированы в блок стиля App.vue без атрибута scoped. 

<style lang="scss">
@import './scss/main.scss';
</style>

Любой компонент Vue, которому требуется доступ к переменным SASS, потребует небольшого изменения Vue.config.js 

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      // pass options to sass-loader
      sass: {
        // @/ is an alias to src/
        // so this assumes you have a file named `src/variables.scss`
        data: `@import "@/variables.scss";`
      }
    }
  }
}
...