1

ReactJS アプリのスタイルシートに .scss を使用しようとしています。私はwebpack構成ファイルを持っていますcss-loader , sass-loader, and style-loader.

css を app.js ファイルにインポートできimport './test.css'ましたが、うまくいきませんでしたimport './test.scss'。

これが私のpackage.jsonです：

  "dependencies": {
    "react": "^15.0.2",
    "react-dom": "^15.0.2"
  },
  "devDependencies": {
    "babel-core": "^6.7.7",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "babelify": "^7.3.0",
    "checkbox.css": "^1.1.1",
    "css-loader": "^0.23.1",
    "eslint": "^2.9.0",
    "eslint-plugin-react": "^5.0.1",
    "html-webpack-plugin": "^2.16.1",
    "node-sass": "^3.7.0",
    "raw-loader": "^0.5.1",
    "sass-loader": "^3.2.0",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.0",
    "webpack-dev-server": "^1.14.1"
  }

私のウェブパック：

  module:{
    loaders:[
      {test:/\.js$/,exclude: /node_modules/, loader: 'babel-loader'},
      {test:/\.scss$/, loaders:['style','css','sass']},
      // {test:/\.css$/, loader: 'style!css', exclude: /node_modules/},
      {test:/\.html$/, loader: 'raw-loader'}
    ]
  },

****3行目はcssの読み込み方法がわかったのでコメントアウトしています。**

私のapp.jsで

私require("!style!css!sass!./styles.scss"); も試してみましimport './styles.scss'たが、成功しませんでした。

現在、私のエラーはUncaught Error: Cannot find module "./../../node_modules/css-loader/lib/css-base.js"

4

4 に答える 4

6

Webpack の構成は問題ありませんが、 sass-loader のドキュメントでわかるように、sass-loader を使用できるようにするためにnode-sassライブラリがありません。

それを修正するには、ライブラリをインストールします

npm install node-sass --save-dev
于 2016-06-08T16:24:40.337 に答える
0

エラーがわかりました。

私の app.jsimport '!style!css!sass!./test.scss' では、 の代わりに書く必要がありimport './test.scss'ました。import './test.cssこれによりエラーが解消されました。css ファイルの場合、前置を使用せずに書き込むことができたため、非常に混乱していました!css!。

于 2016-06-09T16:33:48.663 に答える
0

scss ファイルの拡張子を sass に変更してみてください。どうやら、sass-loader はファイル拡張子から使用したいスタイルを判断するようです。それが私がそれを修正することができた方法です。または、 sass-loader に indentedSyntax オプションを使用します。

loaders: ['style', 'css', 'sass?indentedSyntax']

于 2016-07-19T07:41:50.883 に答える