質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
import

自身のプラットフォーム・プログラム・データセットに対して、外部ソースを取り込むプロセスをimportと呼びます。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

Q&A

解決済

1回答

1237閲覧

Uikit3でscssをインポートするとエラーが出る

job_ao

総合スコア5

import

自身のプラットフォーム・プログラム・データセットに対して、外部ソースを取り込むプロセスをimportと呼びます。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

0グッド

0クリップ

投稿2020/02/19 10:47

編集2020/02/20 00:19

前提・実現したいこと

Uikit3を使ってwebサイトを作成中です。
Gulpを使用し、UIkitのscssをインポート、さらに自身で書いたscssファイルをインポートし、
1つのcss(style.css)として出力して使いたいです。

cssは出力されているのですが、Undefined variableというエラーが出ます。
変数が上手く読み込めていないようです。
variables-theme.scssで数値を変更した場合、反映はされていますが、
Gulpで動かしている時のみ表示されており、cssはきちんと出力されていないようです。
どのようにしたら、エラーが解消するのでしょうか。
よろしくお願いいたします。

発生している問題・エラーメッセージ

gulp-notify: [Error running Gulp] Error: src\_scss\_foundation\uikit\theme\accordion.scss Error: Undefined variable: "$global-color". src\_scss\_foundation\uikit\theme\accordion.scss Error: Undefined variable: "$global-color".

該当のソースコード

style.scssには以下のように書いています。

@import "./_foundation/uikit/_variables-theme.scss"; @import "./_foundation/uikit/_variables.scss"; @import "./_foundation/uikit/_mixins-theme.scss"; @import "./_foundation/uikit/_uikit-theme.scss";

以下、自身でかいたscssのインポート

ファイル構成は以下のURLのままです
https://github.com/uikit/uikit/tree/develop/src/scss

_variables-theme.scssには以下が指定されています。

$global-color: #666 !default;

gulpfileはこのようになっています
以下を参考にしました。
https://yumegori.com/gulp4-setting20191025

//gulpとgulpのパッケージを読み込み const { src, dest, watch, lastRun, parallel, series } = require("gulp"); const sass = require("gulp-sass"); const glob = require("gulp-sass-glob"); const postcss = require("gulp-postcss"); const autoprefixer = require("autoprefixer"); const plumber = require("gulp-plumber"); const notify = require("gulp-notify"); const htmlmin = require("gulp-htmlmin"); const del = require("del"); const ejs = require("gulp-ejs"); const concat = require("gulp-concat"); const order = require("gulp-order"); const rename = require("gulp-rename"); const cleanCSS = require("gulp-clean-css"); const pngquant = require("imagemin-pngquant"); const imagemin = require("gulp-imagemin"); const mozjpeg = require("imagemin-mozjpeg"); const uglify = require("gulp-uglify"); const browserSync = require("browser-sync"); const replace = require("gulp-replace"); //開発と本番で処理を分ける //今回はhtmlの処理のところで使っています const mode = require("gulp-mode")({ modes: ["production", "development"], default: "development", verbose: false }); //読み込むパスと出力するパスを指定 const srcPath = { html: { src: ["./src/_ejs/**/*.ejs", "!" + "./src/_ejs/**/_*.ejs"], dist: "./dist/" }, styles: { src: "./src/_scss/**/*.scss", dist: "./dist/assets/css/", map: "./dist/assets/css/map" }, scripts: { src: "./src/_js/**/*.js", dist: "./dist/assets/js/", map: "./dist/assets/js/map", core: "src/js/core/**/*.js", app: "src/js/app/**/*.js" }, images: { src: "./src/img/**/*.{jpg,jpeg,png,gif,svg}", dist: "./dist/assets/img/" } }; //htmlの処理自動化 const htmlFunc = () => { return src(srcPath.html.src) .pipe( plumber({ errorHandler: notify.onError("Error: <%= error.message %>") }) ) .pipe(ejs({}, {}, { ext: ".html" })) //ejsを纏める .pipe(rename({ extname: ".html" })) //拡張子をhtmlに .pipe( mode.production( //本番環境のみ htmlmin({ //htmlの圧縮 collapseWhitespace: true, // 余白を除去する preserveLineBreaks: true, //改行を詰める minifyJS: true, // jsの圧縮 removeComments: true // HTMLコメントを除去する }) ) ) .pipe(replace(/[\s\S]*?(<!DOCTYPE)/, "$1")) .pipe(dest(srcPath.html.dist)) .pipe(browserSync.reload({ stream: true })); }; //Sassの処理自動化(開発用) const stylesFunc = () => { return src(srcPath.styles.src, { sourcemaps: true }) .pipe( plumber({ errorHandler: notify.onError("Error: <%= error.message %>") }) ) // .pipe(glob()) .pipe(sass({ outputStyle: "expanded" }).on("error", sass.logError)) .pipe( postcss([ autoprefixer({ // IEは11以上、Androidは4、ios safariは8以上 // その他は最新2バージョンで必要なベンダープレフィックスを付与する //指定の内容はpackage.jsonに記入している cascade: false, grid: true }) ]) ) .pipe(dest(srcPath.styles.dist, { sourcemaps: "./map" })) .pipe(browserSync.reload({ stream: true })); }; //Sassの処理自動化(本番用) const stylesCompress = () => { return src(srcPath.styles.src) .pipe( plumber({ errorHandler: notify.onError("Error: <%= error.message %>") }) ) .pipe(glob()) .pipe(sass({ outputStyle: "compressed" }).on("error", sass.logError)) .pipe( postcss([ autoprefixer({ //上の指定と同じ cascade: false, grid: true }) ]) ) .pipe(cleanCSS()) .pipe(dest(srcPath.styles.dist)) .pipe(browserSync.reload({ stream: true })); }; //scriptの処理自動化 const scriptFunc = () => { return src(srcPath.scripts.src, { sourcemaps: true }) .pipe(order([srcPath.scripts.core, srcPath.scripts.app], { base: "./" })) .pipe( plumber({ errorHandler: notify.onError("Error: <%= error.message %>") }) ) .pipe(concat("init.js")) .pipe(uglify({ output: { comments: /^!/ } })) .pipe( rename({ suffix: ".min" }) ) .pipe(dest(srcPath.scripts.dist, { sourcemaps: "./map" })) .pipe(browserSync.reload({ stream: true })); }; //画像圧縮の定義 const imagesBase = [ pngquant({ quality: [0.7, 0.85] }), // mozjpeg({ // quality: 85 // }), imagemin.gifsicle(), imagemin.mozjpeg({ quality: 85, progressive: true }), imagemin.optipng(), imagemin.svgo({ removeViewBox: false }) ]; //画像の処理自動化 const imagesFunc = () => { return src(srcPath.images.src, { since: lastRun(imagesFunc) }) .pipe(plumber({ errorHandler: notify.onError("<%= error.message %>") })) .pipe(imagemin(imagesBase)) .pipe(dest(srcPath.images.dist)); }; // マップファイル除去 const cleanMap = () => { return del([srcPath.styles.map, srcPath.scripts.map]); }; // ブラウザの読み込み処理 const browserSyncFunc = () => { browserSync({ server: { baseDir: "./dist/", index: "index.html" }, reloadOnRestart: true }); }; // ファイルに変更があったら反映 const watchFiles = () => { watch(srcPath.html.src, htmlFunc); watch(srcPath.styles.src, stylesFunc); watch(srcPath.scripts.src, scriptFunc); watch(srcPath.images.src, imagesFunc); }; exports.default = parallel(watchFiles, browserSyncFunc); //gulpの初期処理 exports.build = parallel(htmlFunc, stylesFunc, scriptFunc, imagesFunc); exports.sasscompress = stylesCompress; exports.cleanmap = cleanMap;

試したこと

1._import.scssに$global-color:#fff;を追加
次のエラーに移行

2.style.scssに$global-color:#fff;を追加
エラー変わらず

補足情報(FW/ツールのバージョンなど)

UIkit3
Gulp4

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

自己解決しました。
UIkitのコンポーネントの個別のファイルにはアンダースコアがついておらず、それらをすべてcss出力しようとしていた為、エラーになっていたようです。
コンパイルの対象から外すことで解決しました。

投稿2020/02/20 04:46

job_ao

総合スコア5

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問