我制作了一个我弹出的react-app。在我的组件文件Grid.jsx中：
import "./grid.scss";。
但是，当我使用npm run build:dev进行构建时，出现错误：ERROR in ./src/App/components/wall/grid/Grid.jsx
Module not found: Error: Can't resolve './grid.scss'。
我不理解，因为两个文件都在同一个文件夹中。另外，奇怪的是，如果我在Mac上本地执行脚本npm run build:dev，一切正常。
有人可以帮我找到错误吗？谢谢
这是完整的错误：
+ npm run build:dev
[13:39:06] Starting 'build'...
[13:39:06] Starting 'clean'...
[13:39:06] Finished 'clean' after 12 ms
[13:39:06] Starting 'copy'...
[13:39:06] Finished 'copy' after 22 ms
[13:39:06] Starting 'bundle'...
(node:176) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
Version: webpack 4.29.0
Time: 3609ms
Asset Size Chunks Chunk Names
main.5f3b72bf84d173109fc1.js 1.96 MiB main [emitted] main
main.5f3b72bf84d173109fc1.js.map 1.9 MiB main [emitted] main
vendors.5f3b72bf84d173109fc1.js 278 KiB vendors [emitted] vendors
vendors.5f3b72bf84d173109fc1.js.map 289 KiB vendors [emitted] vendors
ERROR in ./src/App/components/wall/grid/Grid.jsx
Module not found: Error: Can't resolve './grid.scss' in '/opt/atlassian/pipelines/agent/build/src/App/components/wall/grid'
resolve './grid.scss' in '/opt/atlassian/pipelines/agent/build/src/App/components/wall/grid'
using description file: /opt/atlassian/pipelines/agent/build/package.json (relative path: ./src/App/components/wall/grid)
Field 'browser' doesn't contain a valid alias configuration
using description file: /opt/atlassian/pipelines/agent/build/package.json (relative path: ./src/App/components/wall/grid/grid.scss)
no extension
Field 'browser' doesn't contain a valid alias configuration
/opt/atlassian/pipelines/agent/build/src/App/components/wall/grid/grid.scss doesn't exist
.web.js
Field 'browser' doesn't contain a valid alias configuration
/opt/atlassian/pipelines/agent/build/src/App/components/wall/grid/grid.scss.web.js doesn't exist
.mjs
Field 'browser' doesn't contain a valid alias configuration
/opt/atlassian/pipelines/agent/build/src/App/components/wall/grid/grid.scss.mjs doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/opt/atlassian/pipelines/agent/build/src/App/components/wall/grid/grid.scss.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
/opt/atlassian/pipelines/agent/build/src/App/components/wall/grid/grid.scss.json doesn't exist
.web.jsx
Field 'browser' doesn't contain a valid alias configuration
/opt/atlassian/pipelines/agent/build/src/App/components/wall/grid/grid.scss.web.jsx doesn't exist
.jsx
Field 'browser' doesn't contain a valid alias configuration
/opt/atlassian/pipelines/agent/build/src/App/components/wall/grid/grid.scss.jsx doesn't exist
.scss
Field 'browser' doesn't contain a valid alias configuration
/opt/atlassian/pipelines/agent/build/src/App/components/wall/grid/grid.scss.scss doesn't exist
as directory
/opt/atlassian/pipelines/agent/build/src/App/components/wall/grid/grid.scss doesn't exist
[/opt/atlassian/pipelines/agent/build/src/App/components/wall/grid/grid.scss]
[/opt/atlassian/pipelines/agent/build/src/App/components/wall/grid/grid.scss.web.js]
[/opt/atlassian/pipelines/agent/build/src/App/components/wall/grid/grid.scss.mjs]
[/opt/atlassian/pipelines/agent/build/src/App/components/wall/grid/grid.scss.js]
[/opt/atlassian/pipelines/agent/build/src/App/components/wall/grid/grid.scss.json]
[/opt/atlassian/pipelines/agent/build/src/App/components/wall/grid/grid.scss.web.jsx]
[/opt/atlassian/pipelines/agent/build/src/App/components/wall/grid/grid.scss.jsx]
[/opt/atlassian/pipelines/agent/build/src/App/components/wall/grid/grid.scss.scss]
@ ./src/App/components/wall/grid/Grid.jsx 45:0-22
@ ./src/App/components/wall/Wall.js
@ ./src/App/App.js
@ ./src/index.js
这是我正在准备的步骤：
pipelines:
branches:
develop:
- step:
name: Build Dev
caches:
- node
script: # Modify the commands below to build your repository.
- node -v
- npm set progress=false && npm install
- npm test
- npm run build:dev
artifacts:
- build/**
这是我的webpack配置：
const webpack = require('webpack');
const path = require('path');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
// import React from 'react';
// import ReactDOM from 'react-dom';
// plugins
const CleanWebpackPlugin = require('clean-webpack-plugin');
const AutoCleanBuildPlugin = require('webpack-auto-clean-build-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const WebpackChunkHash = require('webpack-chunk-hash');
const AssetsWebpackPlugin = require('assets-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const JavaScriptObfuscator = require('webpack-obfuscator');
const BuildInfo = require('./tools/build-info');
const version = process.env.RELEASE_TAG || BuildInfo.releaseTag;
// Get environment variables to inject into our app.
const getClientEnvironment = require('./config/env');
const env = getClientEnvironment('');
const DEBUG = !process.argv.includes('--production') && process.env.NODE_ENV !== 'production';
const ANALYSER = process.argv.includes('--analyse');
const VERBOSE = process.argv.includes('--verbose');
const GLOBALS = {
'process.env.NODE_ENV': DEBUG ? '"development"' : '"production"',
__DEV__: DEBUG
};
//
const config = {
mode: DEBUG ? 'development' : 'production',
// You may want 'eval' instead if you prefer to see the compiled output in DevTools.
// See the discussion in https://github.com/facebookincubator/create-react-app/issues/343.
devtool: 'cheap-module-source-map',
// These are the "entry points" to our application.
// This means they will be the "root" imports that are included in JS bundle.
// The first two entry points enable "hot" CSS and auto-refreshes for JS.
// context: path.resolve(__dirname, 'src'),
entry: {
main: path.resolve(__dirname, './src/index.js'),
vendors: ['react', 'react-redux', 'redux', 'react-router']
},
resolve: {
extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx', ".scss"],
},
// resolve: {
// extensions: ['.js', '.jsx']
// },
output: {
path: path.resolve(__dirname, './build/public/assets'),
publicPath: './assets/',
sourcePrefix: ' ',
filename: '[name].[hash].js',
},
target: 'web',
stats: {
// fallback value for stats options when an option is not defined (has precedence over local webpack defaults)
all: undefined,
// Add asset Information
assets: true,
// Sort assets by a field
// You can reverse the sort with `!field`.
assetsSort: "field",
// Add build date and time information
builtAt: false,
// Add information about cached (not built) modules
cached: false,
// Show cached assets (setting this to `false` only shows emitted files)
cachedAssets: false,
// Add children information
children: false,
// Add chunk information (setting this to `false` allows for a less verbose output)
chunks: false,
// Add namedChunkGroups information
chunkGroups: false,
// Add built modules information to chunk information
chunkModules: false,
// Add the origins of chunks and chunk merging info
chunkOrigins: false,
// Sort the chunks by a field
// You can reverse the sort with `!field`. Default is `id`.
chunksSort: "field",
// `webpack --colors` equivalent
colors: true,
// Display the distance from the entry point for each module
depth: false,
// Display the entry points with the corresponding bundles
entrypoints: false,
// Add --env information
env: false,
// Add errors
errors: true,
// Add details to errors (like resolving log)
errorDetails: true,
// Add the hash of the compilation
hash: false,
// Set the maximum number of modules to be shown
maxModules: 15,
// Add built modules information
modules: false,
warnings: false,
},
module: {
strictExportPresence: true,
rules: [
// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
// { test: /\.tsx?$/, loader: "awesome-typescript-loader" },
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{ enforce: "pre", test: /\.js$/, loader: "source-map-loader" },
{
test: /\.scss$/,
use: [
"style-loader", // creates style nodes from JS strings
"css-loader?url=false", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS, using Node Sass by default
]
},
{
test: /\.css$/,
use: [
"style-loader", // creates style nodes from JS strings
"css-loader?url=false", // translates CSS into CommonJS
]
},
{
test: /\.jsx?$/,
loader: 'babel-loader', /**/
include: [
path.resolve(__dirname, 'src'),
],
query: {
// https://github.com/babel/babel-loader#options
cacheDirectory: DEBUG,
// https://babeljs.io/docs/usage/options/
babelrc: false,
presets: [
'react',
'es2015',
'stage-0',
],
plugins: [
'transform-runtime',
[
'transform-react-remove-prop-types',
'transform-react-constant-elements',
'transform-react-inline-elements',
],
],
},
},
{
test: /\.(jpe?g|png|gif|svg)$/,
use: 'url-loader?limit=100000'
},
{
test: /\.(png|woff|woff2|eot|ttf|svg|otf)(\?v=\d+\.\d+\.\d+)?$/,
use: 'url-loader?limit=100000'
},
{
test: /\.json$/,
loader: 'json-loader'
},
{
test: /\.txt$/,
loader: 'raw-loader'
},
]
},
// devtool: 'source-map',
plugins: [
new CaseSensitivePathsPlugin(),
// webpack 3 scope hoisting
new webpack.optimize.ModuleConcatenationPlugin(),
// Define free variables
// https://webpack.github.io/docs/list-of-plugins.html#defineplugin
new webpack.DefinePlugin({
...GLOBALS,
'process.env.BROWSER': true,
'process.env.API_URL': JSON.stringify(process.env.API_URL),
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
'process.env.VERSION': JSON.stringify(version),
...env.stringified
}),
//
new ExtractTextPlugin({
filename: '[name]-[chunkhash].css',
disable: false,
allChunks: true
}),
// Plugin to replace a standard webpack chunk hashing with custom (md5) one.
new WebpackChunkHash({
algorithm: 'md5'
}),
// save stats
new AssetsWebpackPlugin({
filename: 'build/public/webpack-assets.json'
})
],
optimization: {
splitChunks: {
chunks: 'async',
minSize:
30000,
maxSize:
0,
minChunks:
1,
maxAsyncRequests:
5,
maxInitialRequests:
3,
automaticNameDelimiter:
'~',
name:
true,
cacheGroups:
{
vendors: {
test: /[\\/]node_modules[\\/]/,
priority:
-10
}
,
default:
{
minChunks: 2,
priority:
-20,
reuseExistingChunk:
true
}
}
}
,
occurrenceOrder: DEBUG,
minimizer:
[
new UglifyJsPlugin({
parallel: true,
sourceMap: false,
uglifyOptions: {
mangle: false,
beautify: DEBUG,
minimize: !DEBUG,
// Eliminate comments
comments: false,
// Compression specific options
compress: {
warnings: false,
// Drop `console` statements
drop_console: DEBUG
}
}
})
]
}
,
externals: {
// "react": "React",
// "react-dom": "ReactDOM"
}
}
;
// DEV ONLY Configuration
// Add a bundle analyser viewer
if (ANALYSER) {
config.plugins.push(new BundleAnalyzerPlugin({
analyzerMode: 'static',
openAnalyzer: false
}));
}
if (!DEBUG) {
console.log("Obfuscating ...");
config.plugins.push(new JavaScriptObfuscator({
rotateUnicodeArray: true
}));
}
module.exports = config;
答案 0 :(得分：0)
好的，很抱歉，因为grid.scss ignoreCase中的.git未设置为true，所以未将config推送到远程存储库。所以以某种方式它被git忽略了。这就是为什么它在本地但不在管道中工作的原因。