ruby-on-rails - 设置 Material UI 套件 React 时,Sass-Loader 的模块构建失败
问题描述
我的环境 我有一个使用 React Native 的 RoR 应用程序设置。我使用 rails server 和 webpack 作为我的开发环境。
尝试添加 UI 库我将文档 中需要的材料 ui 文件添加到我的 ReactJS 应用程序中。
我的问题 在将 Material UI 文件添加到我的根 ReactJS 文件夹后运行我的应用程序时
编译时出现以下错误:
根据此错误,Resolve-url-loader 设置不正确
WARNING in ./app/javascript/components/assets/scss/material-kit-react.scss (./node_modules/css-loader/dist/cjs.js??ref--7-1!./node_modules/postcss-loader/src??ref--7-2!./node_modules/resolve-url-loader??ref--7-3!./node_modules/sass-loader/lib/loader.js??ref--7-4!./app/javascript/components/assets/scss/material-kit-react.scss)
Module Warning (from ./node_modules/resolve-url-loader/index.js):
resolve-url-loader: loader misconfiguration
"attempts" option is defunct (consider "join" option if search is needed)
错误的 resolve-url-loader 设置导致多米诺骨牌效应,理由是 sass/scss 不起作用。
ERROR in ./app/javascript/components/assets/scss/plugins/_plugin-react-datetime.scss (./node_modules/css-loader/dist/cjs.js??ref--7-1!./node_modules/postcss-loader/src??ref--7-2!./node_modules/resolve-url-loader??ref--7-3!./node_modules/sass-loader/lib/loader.js??ref--7-4!./app/javascript/components/assets/scss/plugins/_plugin-react-datetime.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
border-color: $white-color !important;
^
Undefined variable: "$white-color".
in /home/ubuntu/workspace/backend/app/javascript/components/assets/scss/plugins/_plugin-react-datetime.scss (line 116, column 17)
我尝试将以下节点库添加到我的应用程序
"devDependencies": {
"css-loader": "^2.1.1",
"mini-css-extract-plugin": "^0.6.0",
"node-sass": "^4.11.0",
"resolve-url-loader": "^3.1.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"webpack": "^4.30.0",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.2.1"
}
在我的主根文件夹中创建并配置了webpack.config.js
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: './src/styles.scss',
mode: 'development',
module: {
rules: [
{
test: /\.(png|jpg|gif)$/,
include: [
path.resolve(__dirname, './static/img'),
],
use: {
loader: 'file-loader',
options: {
name: '[name]-[hash].[ext]',
},
},
},
{
test: /\.svg$/,
use: {
loader: 'svg-inline-loader',
options: {
name: '[name]-[hash].[ext]',
},
},
},
{test: /\/src\/js\/(?:.*)\.css$/, use: [{loader: 'style-loader'}, {loader: 'css-loader'}]},
{
test: [/\.scss$/, /\.sass$/],
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
sourceMap: true,
},
},
{
loader: 'resolve-url-loader',
options: {
debug: true,
root: path.join(__dirname, './static/img'),
includeRoot: true,
absolute: true,
},
},
{
loader: 'sass-loader',
options: {
outputStyle: 'compressed',
sourceMap: true,
includePaths: [
'./app/javascript/components/assets/scss',
],
},
},
],
},
],
},
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '/app/javascript/components/assets/scss',
},
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: '[name]-[chunkhash].css',
chunkFilename: '[name]-[chunkhash].css', // Ensure each chunk has a unique id
}),
],
devtool: 'source-map'
};
将 sass 加载器添加到 environment.js 文件
./config/webpack/environment.js
const { environment } = require('@rails/webpacker')
// resolve-url-loader must be used before sass-loader
environment.loaders.get('sass').use.splice(-1, 0, {
loader: 'resolve-url-loader',
options: {
attempts: 1
}
});
module.exports = environment
我也试过npm rebuild node-sass
在我尝试配置 webpack 和 resolve-url-loader 之后,我仍然无法让它工作。我已经阅读了他们各自的文档、其他问题和解决方案,但即使是 resolve-url-loader 自己的文档也说它很难配置。
我希望能够在我的 app 文件夹中编译和处理 scss/sass 文件
当前文件夹结构
./ (root folder)
./Webpack.config.js
./Config/webpack/environment
./App/javascript ( root folder react app)
请问我是否需要更多信息
解决方案
I had one file where all the other scss
while got imported and where connected with one and other. Unfortunately the compiler did not take this into in account and read each file sepertly stating that files where missing so I had to add the import the missing files into each separate scss file, using @import
. Sloppy solution but it worked.
Any better answer can will be marked as answer after mine
推荐阅读
- python - Django 表单既不显示也不集成在 HTML 中
- automation - 在自动化混合 android 移动应用程序时,一些定位器无法找到
- javascript - How to get slug from an URL JavaScript
- java - 应用程序中的 DB2 到 MSSQL 迁移错误“org.hibernate.MappingException:无法实例化 id 生成器”和“方言不支持序列”
- python - “试图以访问权限禁止的方式访问套接字”,同时尝试访问 spotify api
- haskell - 折叠二叉树时无法匹配预期类型
- ruby-on-rails - RoR 命令“rake routes”中止
- google-colaboratory - Google Colab 中的云 TPU 虚拟机?
- java - 如何在 Android 中以编程方式设置导航抽屉的背景颜色
- swift - 如何使用swift以编程方式根据数据设置滚动视图的高度