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 配置没问题，但是您缺少node-sass库以便能够使用 sass-loader，正如您在sass-loader 文档中看到的那样。

要修复它，请安装库

npm install node-sass --save-dev
于 2016-06-08T16:24:40.337 回答
1

您的配置看起来不错，但错误表明 css 加载程序包存在问题。我会尝试重新安装它npm i css-loader以防万一。

您将使用 导入 scss import './file.scss'，无需通过require.

如果这不起作用，请随时使用我可以克隆和运行的示例 git repo 来 ping 我。

于 2016-06-08T17:22:58.123 回答
0

我发现了错误。

在我的 app.js 中，我不得不写import '!style!css!sass!./test.scss' 而不是import './test.scss'. 这清除了错误，这非常令人困惑，因为对于 css 文件，我可以在import './test.css不使用!css!prepended 的情况下编写。

于 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 回答