node-sass不从子目录导入sass

Question

我正在开发一个使用谷歌https://material.io Material Io的新项目。 我是sass的新手。当编译sass到CSS时，我需要在node_modules中导入sass，导入失败。这是我的控制台输出：

{
  "status": 1,
  "file": "C:/Users/Er.Venkatraman/Desktop/mdc-101/starter/app.scss",
  "line": 1,
  "column": 1,
  "message": "File to import not found or unreadable: @material/button/mdc-button.",
  "formatted": "Error: File to import not found or unreadable: @material/button/mdc-button.\n        on line 1 of app.scss\n>> @import \"@material/button/mdc-button\";\r\n   ^\n"

我的package.json是和scss文件：

@import "@material/button/mdc-button";

.foo-button {
  @include mdc-button-ink-color(teal);
  @include mdc-states(teal);
}

{
  "name": "mdc-101-web",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "start": "webpack-dev-server --progress",
    "scss": "node-sass --watch ./ -o css"
  },
  "license": "Apache-2.0",
  "devDependencies": {
    "babel-core": "^6.22.1",
    "babel-loader": "^7.0.0",
    "babel-preset-env": "^1.7.0",
    "css-loader": "^0.28.0",
    "extract-loader": "^1.0.2",
    "file-loader": "^1.1.11",
    "node-sass": "^4.9.0",
    "sass-loader": "^6.0.4",
    "webpack": "^3.0.0",
    "webpack-dev-server": "^2.4.3"
  },
  "dependencies": {
    "@material/button": "^0.36.0",
    "@material/ripple": "^0.36.0",
    "@material/textfield": "^0.36.0"
  }
}

我已经按照以下方式配置了webapp配置，但它仍然无效。

/* === dont forget to import scss to main.js file === */
/* ===> import './main.scss'; <=== */

var path = require("path");

module.exports = {
  entry: "./main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
    publicPath: "/dist"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: "babel-loader",
          options: { presets: ["es2015"] }
        }
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: "style-loader" // creates style nodes from JS strings
          },
          {
            loader: "css-loader" // translates CSS into CommonJS
          },
          {
            loader: "sass-loader" // compiles Sass to CSS
          }
        ]
      }
    ]
  }
};


`/* eslint-disable import/no-extraneous-dependencies /
/ eslint-disable arrow-body-style /
/ eslint-disable no-unused-vars */

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const bundleExtractPlugin = new ExtractTextPlugin({
filename: 'css/bundle.css',
});

const vendorsExtractPlugin = new ExtractTextPlugin({
filename: 'css/vendors.css',
});

module.exports = (env) => {
return {
name: 'client',
target: 'web',
entry: ['./src/client/app.jsx'],
output: {
path: path.resolve(__dirname, 'public'),
filename: 'js/bundle.js',
},
module: {
loaders: [
{
test: [/.js$|.jsx$/],
exclude: [/node_modules/],
loader: 'babel-loader',
options: {
plugins: ['transform-runtime'],
presets: ['es2015', 'stage-0', 'react'],
},
},
{
test: /.scss$/,
exclude: [/node_modules/],
use: bundleExtractPlugin.extract({
use: ['css-loader', 'sass-loader'],
}),
},
{
test: /.css$/,
exclude: [/node_modules/],
use: vendorsExtractPlugin.extract({
use: ['css-loader'],
}),
},
],
},
stats: {
colors: true,
},
devtool: 'source-map',
plugins: [
new webpack.DefinePlugin({
SOCKET_URL: JSON.stringify(process.env.SOCKET_URL ? process.env.SOCKET_URL : 'wss://localhost:3000'),
}),
bundleExtractPlugin,
vendorsExtractPlugin,
],
};
};
`

文件夹结构是：