捆绑SCSS并从node_modules导入

Question

我正在尝试捆绑所有CSS，但是遇到了一些问题。

我做@import "materialize-css/sass/materialize.scss";时失败了，因为它无法解析components

当我尝试@import "~materialize-css/dist/css/materialize.css";时，它捆绑了但没有命名空间

.frb-app {
  @import "materialize-css/sass/materialize.scss";
  @import "frb-dx-overrides.scss";
}

postcss.config.js：

module.exports = {
  syntax: "postcss-scss",
  plugins: {
    "postcss-import": {},
    "postcss-preset-env": {},
    cssnano: {}
  }
};

Loader.js

// require("select2/dist/select2.min.css");
require("./css/frb-pmo.scss");

Webpack：

module: {
  rules: [
    {
      test: /\.(js|jsx)$/,
      exclude: /(node_modules)/,
      loader: "babel-loader",
      query: {
        presets: [
          [
            "@babel/preset-env",
            {
              useBuiltIns: "entry",
              targets: {
                ie: "9"
              }
            }
          ]
        ]
      }
    },
    {
      test: /\.(s*)css$/,
      use: [
        "style-loader",
        { loader: "css-loader", options: { importLoaders: 1 } },
        "postcss-loader"
      ]
    },
    {
      test: /\.(jpe?g|png|gif|svg)$/i,
      loader: "url?limit=10000!img?progressive=true"
    },
    {
      test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
      loader: "file-loader?name=bundle/font-[sha512:hash:base64:7].[ext]?mimetype=image/svg+xml"
    },
    {
      test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
      loader: "file-loader?name=bundle/font-[sha512:hash:base64:7].[ext]?mimetype=application/font-woff"
    },
    {
      test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
      loader: "file-loader?name=bundle/font-[sha512:hash:base64:7].[ext]?mimetype=application/font-woff"
    },
    {
      test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
      loader: "file-loader?name=bundle/font-[sha512:hash:base64:7].[ext]?mimetype=application/octet-stream"
    },
    {
      test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
      loader: "file-loader?name=bundle/font-[sha512:hash:base64:7].[ext]"
    }
  ]
},