小编Ama*_*man的帖子

如何使用 Next.js 在组件级别导入 SCSS

我有 CRA 背景,正在努力学习 Next.js 版本 9.4.2

我的项目树看起来像这样:-

pages/
    _app.tsx
    index.tsx
components/
    Navbar/
        index.ts
        Navbar.tsx
        Navbar.scss
Run Code Online (Sandbox Code Playgroud)

在我的里面Navbar.tsx我有一个声明import './Navbar.scss';

这给了我以下错误:-

./src/components/Navbar/Navbar.scss
Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to src/pages/_app.tsx.
Read more: https://err.sh/next.js/css-global
Location: src/components/Navbar/Navbar.tsx
Run Code Online (Sandbox Code Playgroud)

如前所述,如果我将语句import Navbar.scss移至pages/_app.tsx

我知道我可以切换到Navbar.module.scss,但我不想走模块化 scss 的路线,因为我希望我的 scss 变得复杂,我想坚持我编写 scss 的方式,而不是继续寻找解决方法以后可能出现的问题。我愿意在这里被说服,但我还没有找到很好的读物来选择它作为我的道路。

因此,从外观来看,我坚持将所有<component>.scss文件导入_app.tsx. 这将为我留下一长串<component>.scss导入列表_app.tsx,并且我还将留下许多<component>.scss可能有条件不渲染的组件文件。

我在这里有什么选择?

sass reactjs server-side-rendering next.js

10
推荐指数
1
解决办法
6634
查看次数

为 React 组件中未使用的类方法设置 eslint 规则

我正在尝试为类中从未使用过的方法设置 eslint 规则。就像在下面的 react 组件中,我有一个unUsedMethod从未使用过的方法,但是 eslint 没有显示错误。

class Sample extends Component {
    unUsedMethod() {
        console.log('I am never used');
    }
    render() {
        return 'Hello!';
    }
}
Run Code Online (Sandbox Code Playgroud)

我的 eslint 文件看起来像这样

{
    "parser": "babel-eslint",
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "extends": ["eslint:recommended", "plugin:react/recommended"],
    "parserOptions": {
        "ecmaFeatures": {
            "experimentalObjectRestSpread": true,
            "jsx": true,
            "sourceType": "module",
            "allowImportExportEverywhere": false,
            "codeFrame": false
        },
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "indent": [2, 4, {"SwitchCase": 1, "ObjectExpression": "first"}],
        "linebreak-style": [
            "error",
            "unix" …
Run Code Online (Sandbox Code Playgroud)

reactjs eslint es6-class

5
推荐指数
1
解决办法
1670
查看次数

Hapi,错误 415:不支持的媒体类型错误

我正在尝试向feedData服务器发送一个 json 对象。这个对象里面有一个文件对象。

feedData = {
    'title' : 'some title',
    'type' : 1,
    'feedBody' : {
        'image' : File Object {lastModified : xxxx, name : 'image.jpg', type: 'image/jpg', ... }
    }
}

return fetch(`/api/feeds/${feedId}/create`, {
    method: 'POST',
    body: JSON.stringify(feedData),
    headers: {
        'Authorization': getTokenHeader(token),
    },
})
Run Code Online (Sandbox Code Playgroud)

在我有的路线中,

method: 'POST',
path: '/api/feeds/{feed}/create',
config: {
    payload: {
        output: 'stream',
        parse: true,
        allow: ['application/json', 'multipart/form-data', 'image/jpeg', 'application/pdf', 'application/x-www-form-urlencoded'],
        maxBytes: 1024 * 1024 * 100,
        timeout: false
    },
    handler: (req, res) => { …
Run Code Online (Sandbox Code Playgroud)

javascript api upload node.js hapijs

4
推荐指数
3
解决办法
4701
查看次数

删除没有工作MySQL的空格.使用TRIM()和REPLACE()

看看:FIDDLE

select IF((TRIM(replace(' IKECHUKWU  OSUJI',' ',''))=TRIM(replace('IKECHUKWU OSUJI',' 
',''))),"same","diff");
select IF((TRIM(replace(' Aman Minhas  ',' ',''))=TRIM(replace(' Aman Min has',' 
',''))),"same","diff");
Run Code Online (Sandbox Code Playgroud)

错误的形象 第一个查询返回diff.第二个返回相同.它的一些奇怪的间距问题,似乎无法理解为什么会出现这种行为.

mysql whitespace replace trim removing-whitespace

1
推荐指数
1
解决办法
3753
查看次数

流星发布和订阅大型收藏

因此,让我们以这种情况为例,在电子商务应用程序中,用户搜索“手表”。

我是否建议发布和订阅整个产品系列?因为那张桌子我长大了。我可以不订阅而从收藏中获取吗?

另外,在Meteor 1.3中,哪个是定义集合的最佳位置?根据我的阅读,它必须位于中/imports/api,但对其进行一些说明可能会有所帮助。

谢谢,

mongodb meteor

1
推荐指数
1
解决办法
816
查看次数