PostCSS不加载SCSS模块依赖项

时间:2018-09-21 09:37:16

标签: ruby-on-rails reactjs webpack postcss webpacker

嘿堆高车,

我正在使用 Rails Webpacker 构建一个 React 应用,这迫使我使用PostCSS来加载样式以及其他可选样式顶部的装载机。

从我的import '@material/react-button/index';之类的包中导入 SCSS 模块时, PostCSS 似乎并没有加载它们各自的依赖项,因为它需要@material/base/mixins装载。

node_modules/@material/base/_mixins.scss文件夹中存在文件node_modules。因此,我真的不知道为什么它不会读取或导入相应的文件。

Environment.js

const { environment } = require('@rails/webpacker')
const path = require('path')

module: {
  rules: [{
    test: /\.js(\.erb)?$/,
    exclude: /node_modules/,
    loader: 'babel-loader',
    options: {
      presets: [
        ['env', { modules: false }]
      ]
    }
  },
  {
    test: /\.scss$/,
    use: extractSCSS.extract({
      use: [
      { loader: 'style-loader', options: { sourceMap: true } },
      { loader: 'css-loader', 
          options: { 
            sourceMap: true,
            importLoaders: 2 
          } 
      },
      { loader: 'postcss-loader', options: { sourceMap: true } },
      { loader: 'sass-loader', 
          options: { 
            sourceMap: true, 
            includePaths: ["node_modules"]
          }
      }]
    })
  }]
}

module.exports = environment

错误日志

10:53:42 webpacker.1 | ERROR in ./node_modules/css-loader??ref--2-1!./node_modules/postcss-loader/lib??ref--2-2!./node_modules/sass-loader/lib/loader.js??ref--2-3!./node_modules/@material/react-button/index.scss
10:53:42 webpacker.1 | Module build failed:
10:53:42 webpacker.1 | @import "@material/base/mixins";
10:53:42 webpacker.1 | ^
10:53:42 webpacker.1 |       File to import not found or unreadable: @material/base/mixins.
10:53:42 webpacker.1 |       in /Users/remy/projects/kmpgny-sked-rails/node_modules/@material/ripple/common.scss (line 17, column 1)
10:53:42 webpacker.1 | Error:
10:53:42 webpacker.1 | @import "@material/base/mixins";
10:53:42 webpacker.1 | ^
10:53:42 webpacker.1 |       File to import not found or unreadable: @material/base/mixins.
10:53:42 webpacker.1 |       in /Users/remy/projects/kmpgny-sked-rails/node_modules/@material/ripple/common.scss (line 17, column 1)
10:53:42 webpacker.1 |     at options.error (/Users/remy/projects/kmpgny-sked-rails/node_modules/node-sass/lib/index.js:291:26)
10:53:42 webpacker.1 |  @ ./node_modules/@material/react-button/index.scss 2:14-161 21:1-42:3 22:19-166
10:53:42 webpacker.1 |  @ ./app/javascript/sked-app/components/App.jsx
10:53:42 webpacker.1 |  @ multi (webpack)-dev-server/client?http://localhost:3035 webpack/hot/dev-server ./app/javascript/sked-app/components/App.jsx
10:53:42 webpacker.1 | webpack: Failed to compile.

0 个答案:

没有答案