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

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

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

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

import

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

Q&A

解決済

2回答

1330閲覧

Dart SassとJavaScriptでscssファイルをimportできない

totocalcio

総合スコア7

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

import

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

0グッド

0クリップ

投稿2021/06/01 05:44

編集2021/06/01 05:52

前提・実現したいこと

node-sassからsassに移行しようとしていたのですが、
javascriptでscssファイルのimportをしようとしていてエラーが発生しており、
importができません。

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

Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders > :export { | testWidth: 300px; | testHeight:600px;

該当のソースコード

scss

1:export { 2 testWidth: 300px; 3 testHeight:600px; 4}

JavaScript

1import style from './_variable.scss'

webpack

1 module: { 2 rules: [ 3 { 4 test: /.(css|scss|sass)/, 5 use: [ 6 "style-loader", 7 "css-loader", 8 { 9 loader: "sass-loader", 10 options: { 11 implementation: require('sass'), 12 fiber: require('fibers'), 13 }, 14 }, 15 ], 16 }, 17 ], 18 },

試したこと

元々入っていたnode-sassのアンインストール

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

webpackですが、Storybookなので実際はmain.jsの内容です。
下記package.jsonのバージョンです

packege.json

1 "babel-loader": "^8.2.2", 2 "css-loader": "^3.6.0", 3 "fibers": "^5.0.0", 4 "sass": "^1.34.0", 5 "sass-loader": "^11.1.1", 6 "style-loader": "^1.3.0"

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

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

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

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

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

guest

回答2

0

自己解決

こちら解決しませんでした。

投稿2021/08/24 00:06

totocalcio

総合スコア7

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

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

0

sassのヴァージョンを下げてみてはどうでしょうか?

自分は当時、警告か何かがでて通らなかったので、下げた記憶があります。
それを見返してみると、sassだけヴァージョンを固定していますね。

"mini-css-extract-plugin": "^1.6.0", "postcss-loader": "^5.3.0", "sass": "1.32.13", "sass-loader": "^11.1.1", "ts-loader": "^9.2.2", "ts-node": "^10.0.0", "tsconfig-paths": "^3.9.0", "typescript": "^4.3.2",

もっとも自分のと環境や状況が違うので、正しくないかもしれないですが、役に立てば幸いです。

以下追記。

webpackのscssの部分、当然ながらこれも自分と環境が違うのでそのままは適用できないと思いますが、参考までに載せときます。

{ test: /.(scss)$/, use: [ { loader: MiniCssExtractPlugin.loader, }, { loader: 'css-loader', options: { url: false } }, { loader: 'postcss-loader', options: { postcssOptions: { plugins: [ [ require('autoprefixer') ] ] } } }, { loader: 'sass-loader' } ] },

投稿2021/06/21 00:47

編集2021/06/22 02:55
tomomo

総合スコア430

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

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

totocalcio

2021/06/22 02:32

回答ありがとうございます。 いくつかバージョン下げたもので試してみたのですが、エラーの内容は変わらずでした。。。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問