Arhn - архитектура программирования

Архитектура для использования SCSS с Angular 2/4

Я пытаюсь настроить архитектуру для использования SCSS с моим проектом angular 4, а не для простого CSS. До сих пор я следовал руководству по стилю Angular, чтобы расположить CSS рядом с компонентами ts файлов, где каждый компонент имеет отдельный каталог, как при первом подходе к функции.

Поскольку теперь я перехожу к использованию SCSS, я просто заменил свои файлы CSS файлами SCSS. Но я не могу понять, куда именно я должен положить свои файлы _variables.scss, _mixins.scss и общие файлы styles.scss, чтобы переменные всегда загружались первыми, чтобы можно было разрешить зависимости переменных в файлах SCSS.

Я использую webpack для компиляции файлов SCSS.

webpack.config.js

module: {
    rules: [
        {
            test: /\.ts$/,
            loaders: ['awesome-typescript-loader', 'angular2-template-loader']
        },
        {
            test: /\.html$/,
            loader: 'html-loader'
        },
        {
            test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
            loader: 'file-loader?name=assets/[name].[ext]'
        },
        {
           test: /\.scss$/,
           use: [
                { loader: "style-loader" },
                { loader: "css-loader" },
                { loader: "sass-loader" }
            ]
        }
    ]}

Поскольку я не очень хорошо разбираюсь в разработке и архитектуре приложения, любая помощь будет высоко оценена.

webpack typescript angular architecture sass
23.06.2017

  • у вас есть несколько вариантов там. мы использовали бутстрап и sass. вам нужно включить пакет sass bootstrap в свой проект. ссылка: github.com/AngularClass/angular-starter/wiki/ 23.06.2017
  • Знаете ли вы какой-либо способ сделать это без включения начальной загрузки или какой-либо другой библиотеки стилей? Мой проект требует, чтобы я создал собственную структуру CSS для библиотеки угловых виджетов с как можно меньшим пространством. 23.06.2017
  • вы можете обратиться к этому сообщению: stackoverflow.com/questions/ 42433995/использование-sass-in-angular-2 23.06.2017
  • К вашему сведению: загрузчики ts и scss уже встроены в Webpack 2.x. 23.06.2017
  • @deezg Я хочу использовать не только переменные локального компонента, но и глобальные переменные, которые будут использоваться во всем веб-приложении. Для ex- $colorPrimary, $colorAccent сообщение, о котором вы упомянули, показывает только, как использовать локальные переменные. 23.06.2017
  • @Nikolai Вы также использовали глобальный файл _variable.scss? Если да, то как именно? 23.06.2017

Ответы:


1

Если вам нужен код общего стиля, и вы уже используете Webpack, вы можете просто импортировать общие стили в свой основной модуль. Например:

Структура каталогов

/src
  /app
    app.component.html
    app.component.ts
    app.component.scss
  /styles
    _mixins.scss
    _variables.scss
    common.scss
  app.module.ts
  main.ts

В вашем файле app.module.ts вы можете import './styles/common.scss', в который в основном будут импортированы все ваши миксины и тому подобное. Ваш файл app.component.scss, скорее всего, захочет импортировать «../styles/variables» и, возможно, некоторые миксины.

Другой вариант использования общих таблиц стилей — просто импортировать части, когда они вам нужны, в файлы компонентов *.scss, а не вносить их все сразу. Это может помешать вам импортировать детали, которые вам на самом деле не нужны.

23.06.2017
  • Я сделал, как вы просили. Я импортировал файл variables.scss внутрь файла app.component.scss, а файл app.component.scss — в файл AppComponent, используя styleUrls: []. Но внутри других компонентов SCSS переменные не разрешаются. 23.06.2017

    • 2

    Кто-то разработал начальное угловое приложение с учетом SASS и идеальной архитектуры, а также всего остального, что может понадобиться.

    Получайте удовольствие, исследуя его. Это сотворило чудеса для меня.

    Семя библиотеки Angular

    28.11.2017
    Новые материалы
    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..
    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..
    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..
    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..
    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..
    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..
    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..